ErisNuts Oct 30 2017 at 13:26

Задачка про страницу в три столбца, один из них в сто пикселей

6 min

11K

CSS*HTML*

From sandbox

Comments 27

UFO just landed and posted this here

Mikola-BLR Oct 30 2017 at 22:46

4. Поэтому правильнее записать так:

.block:not(:first-child) {
  flex: 1 1 50%;
}

Чтобы и на мелких разрешениях длинное изображение не ломало ширину блоков:

.block:not(:first-child) {
  flex: 1 1 50%;
  overflow: hidden;
}

UFO just landed and posted this here

ErisNuts Oct 31 2017 at 20:37

исправила height:100% на height:100vh, вы правы, так аккуратнее.
не спорю, привязываться к структуре документа была не самая лучшая идея, но она обусловлена, постановкой задачи — разбиение столбцов на первый и все остальные, а главное, появилась возможность воспользоваться маппингом.
на счет flex: 1 1 auto — да, я не учла вариант с вложенными элементами, правильнее будет flex: 1 1 50%, либо указывать max-width: 50%.
адаптивность и вообще работа с мобильниками идет как дополнительное задание на защите лабораторной, эту часть я намеренно пока опустила, позже планирую дополнить.

GreatRash Oct 30 2017 at 16:01

codepen.io/anon/pen/BmywMx
Задача оторвана от жизни, поэтому вот.

ErisNuts Nov 1 2017 at 00:30

ErisNuts Nov 1 2017 at 00:32

я просто не совсем поняла, что хорошего в данном случае нам дает абсолютное позиционирование.
расскажите, пожалуйста, чем вы руководствовались…

YNile Nov 1 2017 at 12:46

Предположу, что задачей.
Какая задача, такое и решение — простое и понятное. Ничего лишнего.
Про наполнение и переполнение блоков в задаче ни слова.

ErisNuts Nov 1 2017 at 14:03

Обычно абсолютное позиционирование используется, если никакие другие методы не работают. Например, при размещении иконок внутри контейнера.
Элемент с таким типом позиционирования не зависит от других элементов и не влияет на другие элементы. Это следует учитывать каждый раз, когда используется абсолютное позиционирование. Его чрезмерное или неправильное использование могут ограничить гибкость сайта.
А самое главное, цель обучения — не научиться решать «оторванные от жизни» задачи, а постепенно погружаться в мир предмета, впитывая знания о правилах, требованиях, ограничениях. Иначе, мне пришлось бы принимать абсолютно любые рабочие варианты.

GreatRash Nov 1 2017 at 17:46

Мало ли, что там обычно используется. Мне дали абсолютно оторванную от реальности задачу, я привёл абсолютно оторванное от реальности решение, которое ещё и работает везде, начиная аж с ИЕ7.

-1

vdv73rus Oct 30 2017 at 17:38

А где CSS-grids? 2017-й на дворе

ErisNuts Nov 1 2017 at 00:20

добавила вариант с грид раскладкой .)

nebsehemvi Oct 30 2017 at 22:46

Иногда самое хорошее решение — простое.

Выкинуть из первого варианта флексы, правильно оформить код и всё будет хорошо. Еще бы от calc избавиться, так вообще прелесть будет — на CSS2 взлетит.
codepen.io/NebSehemvi/pen/pdvwQg

И почему автор использует vw? Если не ошибаюсь, то при использовании vw может появиться горизонтальная полоса прокрутки.

dimpa91 Oct 31 2017 at 19:55

Можно и от calc избавиться: jsfiddle.net/8y2mu14w/1

ErisNuts Nov 1 2017 at 00:35

добавила этот вариант в статью, он достаточно интересный.
с указанием на ваше авторство, с небольшими правками.
а вам на практике приходилось отказываться от функции calc?

dimpa91 Nov 1 2017 at 10:57

Да, чаще всего с отрицательным margin это решается

ErisNuts Oct 31 2017 at 21:01

задачка учебная, поэтому цель не просто получить решение, а чему-то научиться…
да, может появиться скроллбар, потому что размер вьюпорта больше, чем ширина элемента html.
если дополнить код таким образом:

html, body, .blocks {
  width: 100%;
}

можно использовать 50% вместо 50vw.

ErisNuts Nov 1 2017 at 00:21

спасибо за интересный вариант решения задачки, добавила его в статью с сылкой на ваше авторство, но с небольшими правками.)

SmithZx Oct 30 2017 at 22:46

Ещё до прочтения вариантов пришло в голову очевидное решение, не представленное в статье:
codepen.io/anon/pen/pdvWNZ

Скрытый текст

<div class="root">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.root {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 100px 1fr 1fr;
}
.red {
  grid-column: 1;
  background-color: red;
}
.green {
  grid-column: 2;
  background-color: green;
}
.blue {
  grid-column: 3;
  background-color: blue;
}

MeylisDay Oct 31 2017 at 19:55

Я тоже не очень понимаю, почему гриды не упомянуты в статье.

ErisNuts Nov 1 2017 at 00:22

исправилась .)

ErisNuts Nov 1 2017 at 00:24

спасибо за отличный вариант решения задачки!
добавила его в статью с ссылкой на ваше авторство, но с небольшими правками .)
посмотрите, пожалуйста, получилось очень лаконично.)

Ukrop1975 Oct 30 2017 at 22:46

Кто мешает для DIV-ов использовать table-cell?
codepen.io/Ukrop1975/pen/dZPmvV

ErisNuts Nov 1 2017 at 00:26

Ничего.) хороший вариант, имеет свои плюсы. добавила его с ссылкой на ваше авторство с небольшими правками.)

alix_ginger Oct 31 2017 at 12:27

Итак, здесь мы имеем несколько антипаттернов: незначащие имена классов

И предлагаете red, green & blue вместо one, two & three? Эти имена точно так же описывают представление, а не семантику, что не совсем правильно.

ErisNuts Oct 31 2017 at 19:53

В таких вопросах я всегда аппелирую к стоимости поддержки кода. Допустим поставили задачу добавить еще одну полосу. И вот нужно переименовать все блоки, исправить стили, короче, куча работы.
А идея с классами — названиями цветов используется в CSS-фреймворках: в Semantic UI, например:
офомление кнопок
И еще, что мне кажется важным, по коду же и так видно, что блок первый, или второй, дублирование информации получается.

alix_ginger Nov 1 2017 at 14:53

А если понадобиться изменить цвета блоков, придется править HTML, чтобы изменить представление.

Конечно, я прекрасно понимаю, что идеал — когда в HTML только семантика, а в CSS только представление — недостижим, и просто в данный момент придираюсь :) Ради простоты и стоимости поддержки можно (и нужно) отклониться от «идеологической чистоты» кода, как, например, и сделали в Semantic UI. В Bootstrap, кстати, сделали правильнее: классы, от которых зависит цвет кнопки, называются btn-primary, btn-secondary, btn-danger и т. д. — такие названия говорят о значении кнопки, а не о ее внешнем виде.

А вообще, в контексте исходного задания нет никакой семантики, к которой можно привязать классы.

Show the best of all time