Как это сверстать?

Есть вот такой лейаут:
flexbox.png

Слева на широком мониторе, справа на мониторе поменьше. Верстка на флекс-боксе, переключение по медиа-запросу, понятное дело. Как именно перестроить блоки?

На поверхности лежит алгоритм: сменить режим флекса с row на column, включить wrap и всунуть зеленый блочок на вторую позицию при помощи свойства order. Ну и плюс еще немного покрутить отступы, но то уже второстепенные детали.

Но проблема в том, что высоты и всех трех блоков с картинки, и оборачивающего их контейнера - неизвестны. Высота должна определяться контентом (ширины в процентах от вьюпорта). А без фиксации высоты контейнера блоки не переносятся во вторую колонку, а просто выстраиваются в общий столбец.

Можно было бы решить вопрос справа, тупо обернув зеленый и оранжевый в промежуточный контейнер - но что тогда делать с левым?

Мне даже кажется, что я бы смог сделать это на флоатах, но флекс нужен по ряду других причин.
Гриды тоже не предлагать.
  • Вопрос задан
  • 955 просмотров
Пригласить эксперта
Ответы на вопрос 4
monochromer
@monochromer
DIVeloper
Вариант на float.

Допущение, что боковые колонки фиксированной ширины (в демке 200px). Центральная колонка идет в разметке первой (SEO-шники в экстазе).

Пример 10-летней давности.
Ответ написан
Комментировать
Vampireos
@Vampireos
https://vk.com/axelaredz
Попробуйте упростить задачу до минимума, и решение всплывёт само^ ^
..если не выходит значит нужно избавляться от лишнего)
Ответ написан
Комментировать
@AnjeyTsibylskij
У меня на флоатах получилось что-то похожее https://jsfiddle.net/v1ga73uq/
Ответ написан
Комментировать
@krontill
Как вариант зеленый блок можно продублировать и тогда медиазапросом показываем необходимый блок и скрываем не нужный.
Вот пример как это можно сделать codepen.io/krontill/pen/Npjmgr
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы