Практически любой вебсайт использует колонки. Это может быть контент и сайдбар, новости в несколько колонок, вывод миниатюр фотогалереи и т.п. Оказывается для многих, эта регулярная задача вызывает затруднение. Решить её можно несколькими адекватными способами:
- Используя CSS свойство float (самый кроссбраузерный способ, про него и поговорим)
- Используя flexbox модуль (тоже уже вполне кроссбраузерный способ, на мой взгляд он еще проще, но я привык к первому способу)
- Используя Grid (поддержка браузерами еще не полная, но уже вот-вот, я им пока не пользовался)
Далее я расскажу о простом, безглючном, легко прогнозируемом в поведении решении для верстки колонок.
В свое время, я взял решение из bootstrap 3 и оно мне показалось на столько простым и логичным, что до сих пор использую. Вообще рекомендую подсматривать решения именно на популярных решениях.
И так, приступим. Например, нам нужно разбить страницу такими способами:
Для начала делаем html-разметку:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!--Две одинаковые колонки--> <div class="wrap"> <div class="col">Колонка 1 (50% ширины)</div> <div class="col">Колонка 2 (50% ширины)</div> </div> <!--Три одинаковые колонки--> <div class="wrap"> <div class="col-3">Колонка 1 (33.3% ширины)</div> <div class="col-3">Колонка 2 (33.3% ширины)</div> <div class="col-3">Колонка 3 (33.3% ширины)</div> </div> <!--Три разные колонки--> <div class="wrap"> <div class="col-20">Колонка 1 (20% ширины)</div> <div class="col-60">Колонка 2 (60% ширины)</div> <div class="col-20">Колонка 3 (20% ширины)</div> </div> |
Обращаем внимание, что у нас все колонки вкладываются в один общий div с классом «wrap».
Далее начинаем задавать css стили блокам. Для начала первая хитрость — задаем всем блокам свойство box-sizing. (Полный код CSS в конце документа)
|
1 2 3 |
* { box-sizing: border-box; } |
Это значит, что теперь у всех объектов в ширину и высоту включаются размеры полей отступов от содержимого контейнера padding и толщина рамки border. Если вы не можете это применить ко всем селекторам (*), то применяйте к каждой колонке. Но без этого свойства ничего не выйдет.
Далее вторая хитрость. Добавляем псевдоэлементам контейнера (в который вложены колонки) свойство clear: both. Это, чтобы после колонок прекращалось действие обтекания и верстка себя вела предсказуемо. Иначе у вас периодически будут строить «лесенки» и скорее всего «поедет верстка».
|
1 2 3 4 5 |
.wrap::after, .wrap::before{ content: ""; display: table; clear: both; } |
Далее, если нам нужны отступы между содержимым колонок, как на изображении ниже:
То добавляем следующий css код для контейнера .wrap с отрицательным margin. Это необходимо, чтобы потом содержимое колонок встало ровно по вашей сетке (слева в самой левой колонке и справа в самой право колонке). Про отступы поговорим более понятно в конце статьи.
|
1 2 3 |
.wrap{ margin: 0 -15px; } |
Далее задаем css код для самих колонок. Начнем с двух одинаковых, с классом «col»:
|
1 2 3 4 5 |
.col{ float: left; padding: 0 15px; width: 50%; } |
Тут мы остановимся более подробно:
- float: left; — контейнер (колонка) выравнивается по левому краю, все остальные элементы обтекают его справа.
- padding: 0 15px; — Добавляет поля в 15 px слева и справа от содержимого контейнера (колонки). Это если нужны отступы между содержимым колонок (чтобы содержимое не соприкасалось). Потом подробнее объясню.
- width: 50%; — Ширина нашей колонки, относительно доступного места. Соответственно все доступное место — 100%. 50% — это половина. Само собою, сумма ширины всех колонок не должна быть более 100%.
Для трех одинаковых колонок мы задаем ширину 33,3% (да, можно не целое число):
|
1 2 3 4 5 |
.col-3{ float: left; padding: 0 15px; width: 33.3%; } |
Для 3 колонок (крайние одинаковые, средняя отличается) мы задаем два класса:
|
1 2 3 4 5 6 7 8 9 10 |
.col-20{ float: left; padding: 0 15px; width: 20%; } .col-60{ float: left; padding: 0 15px; width: 60%; } |
Хочется сразу обратить внимание на название классов колонок внутри одного проекта. Рекомендую их называть так, чтобы было понятно сколько они по ширине, не давать разные классы для одинаковых колонок. Например: не надо называть 2 одинаковые колонки с шириной 50% левая и правая (можно просто .col — как у нас, если других размерностей нет). Если по нашим названиям классов, то: .col-3 — (одна треть), .col-60 — (60%).
У bootstrap названия по количеству колонок сетки (но как только приходит понимание построения своей сетки и работе с адаптивностью — то bootstrap становится не нужен).
Полный css код для всех наших колонок на float:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
* { box-sizing: border-box; } .wrap::after, .wrap::before{ content: ""; display: table; clear: both; } .wrap{ margin: 0 -15px; } .col{ float: left; padding: 0 15px; width: 50%; } .col-3{ float: left; padding: 0 15px; width: 33.3%; } .col-20{ float: left; padding: 0 15px; width: 20%; } .col-60{ float: left; padding: 0 15px; width: 60%; } |
Отступы между содержимым колонок:
Тут все просто, у колонок мы задаем padding слева и справа по 15px. Т.к. соседние колонки соприкасаются, то между содержимым получается расстояние 30px. А чтобы самая левая колонка и самая правая были ровно по родительскому контейнеру, то родительскому контейнеру .wrap мы задаем слева и справа отрицательные отступы margin в -15px (т.е. ровно по размеру padding). Далее постарался изобразить наглядно:
Очень интересное решение и полезное.
Вот только тема адаптивности не раскрыта полностью.
Имеется ввиду под разные размеры экрана. При @media 750, например, как сделать, чтоб одна колонка была под другой, то есть выстроились по вертикали ?