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

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

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

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

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

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

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

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

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

Zoom-эффект на CSS3

Октябрь 21, 2015 г.

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

Читать

Почему не работает стиль :: before или :: after?

Октябрь 22, 2017 г.

Замечательные псевдо-классы, которые позволяют добавить виртуальные контейнеры в начало или конец контейнера. Как они работают и почему могут "не сработать"? ...

Читать

Анимация нажатия: эффект нажатой кнопки

Май 2, 2025 г.

Когда пользователь нажимает кнопку, полезно дать тактильную обратную связь — например, слегка "прижать" её визуально. Такой эффект достигается с помощью изменения масштаба (scale) и вертикального смещения (translateY). Это статья из цикла заметок по ...

Читать

Псевдоклассы состояния контейнера input

Октябрь 24, 2018 г.

Хотелось бы выделить такой перечень css псевдоклассов и приемов работы с ними, который основан на состоянии элемента INPUT. :checked псевдокласс Позволяет писать стили для радио/чек - боксов, которые выделены (checked) в текущий момент. [crayon-689593d5c27cb273547533/] ...

Читать
 

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

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



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