Pull to refresh

Comments 27

UFO landed and left these words here
4. Поэтому правильнее записать так:
.block:not(:first-child) {
  flex: 1 1 50%;
}

Чтобы и на мелких разрешениях длинное изображение не ломало ширину блоков:
.block:not(:first-child) {
  flex: 1 1 50%;
  overflow: hidden;
}
UFO landed and left these words here
  • исправила height:100% на height:100vh, вы правы, так аккуратнее.
  • не спорю, привязываться к структуре документа была не самая лучшая идея, но она обусловлена, постановкой задачи — разбиение столбцов на первый и все остальные, а главное, появилась возможность воспользоваться маппингом.
  • на счет flex: 1 1 auto — да, я не учла вариант с вложенными элементами, правильнее будет flex: 1 1 50%, либо указывать max-width: 50%.
  • адаптивность и вообще работа с мобильниками идет как дополнительное задание на защите лабораторной, эту часть я намеренно пока опустила, позже планирую дополнить.

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

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

И почему автор использует vw? Если не ошибаюсь, то при использовании vw может появиться горизонтальная полоса прокрутки.
добавила этот вариант в статью, он достаточно интересный.
с указанием на ваше авторство, с небольшими правками.
а вам на практике приходилось отказываться от функции calc?
Да, чаще всего с отрицательным margin это решается
задачка учебная, поэтому цель не просто получить решение, а чему-то научиться…
да, может появиться скроллбар, потому что размер вьюпорта больше, чем ширина элемента html.
если дополнить код таким образом:
html, body, .blocks {
  width: 100%;
}

можно использовать 50% вместо 50vw.
спасибо за интересный вариант решения задачки, добавила его в статью с сылкой на ваше авторство, но с небольшими правками.)
Ещё до прочтения вариантов пришло в голову очевидное решение, не представленное в статье:
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;
}

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

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

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

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

А вообще, в контексте исходного задания нет никакой семантики, к которой можно привязать классы.
Only those users with full accounts are able to leave comments. Log in, please.