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

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

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

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

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

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

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

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

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

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

Скрыть/изменить стили выделения в HTML - псевдокласс css::selection

Март 12, 2019 г.

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

Читать

Эффект, затрудняющий прочтение текста

Август 1, 2018 г.

Этот эффект я увидел на одном сайте, где авторы решили так оригинально бороться с пользователями ад-блокера. Дескать сайт живет за счет рекламы, а раз ...

Читать

 

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

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



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