Верстка: большой блок слева и четыре малых справа

Дизайнеры любят разные компоновки блоков, но не всегда удобно использовать таблицы для верстки, чтобы воплотить дизайн в HTML. Рассмотрим одну из компоновок, которые я называю «один к четырем».

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

Не редко это связано с тем, что у нас разные требования для мобильной версии и десктопа, и если мы используем таблицу для десктопа, то переверстать её в обычный вертикальный список с помощью CSS под мобилу будет уже не очень приятная задача.

То есть HTML выглядит как то так:

Кроме компоновки, нам скорее всего нужны будут и отступы между блоками, и тут бы нам использовать магию flex контейнера, где зазоры задаются просто свойством gap.

Но, к сожалению, flex далеко до табличной верстки.

Приходится использовать плавающие контейнеры. Что скорее всего потребует в конце этого списка вставить псевдо-контейнер шириной 100% и clear: both свойством.

Написать комментарий

Мало букафф? Читайте есчо !

box-sizing: padding-box на Chrome

Сентябрь 19, 2015 г.

Пока Хром не поддерживает данное значение атрибута спецификации CSS, что то надо делать! Можно отказаться, но удобно ведь? Самый простой выход написать вместо злополучного экспериментального padding-box: [crayon-686b03b6ef2f2825685414/] Во ...

Читать

Эффект размытия blur средствами CSS

Декабрь 23, 2015 г.

В интернете много решений, я попробовал, наверное, все :) Основная проблема - не удаётся достичь кросс-браузерности. Как всегда, отличился IE. Для ...

Читать

 

Комментарии к «Верстка: большой блок слева и четыре малых справа»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: