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

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

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

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

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

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

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

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

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

Переносы элементов сетки bootstrap разной высоты (фикс для версии 3.x)

Май 2, 2021 г.

В третей версии бутстрапа используется выравнивание элементов сетки col-* с помощью свойства float: left;. Пока элементы в сетке имеют одинаковую высоту, ...

Читать

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

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

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

Читать

Анимация: Поднятие элемента с тенью при наведении

Апрель 26, 2025 г.

Эта анимация создаёт эффект, будто элемент "приподнимается" над страницей, становясь более заметным. Обычно для этого используется свойство box-shadow, иногда в сочетании с лёгким смещением (transform: translateY(-2px)). Это статья из цикла заметок ...

Читать

Верстка слоя-подкладки во всю ширину viewport

Апрель 16, 2019 г.

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

Читать
 

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

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



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