Верстка сайта с помощью колонок

Верстка сайта с помощью колонок

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

Как можно сделать колонки

Сначала давайте просто рассмотрим несколько способов, которыми можно сделать колонки, а потом уже разберем пару примеров.

С помощью плавающих блоков. Сегодня это самый популярный способ сделать колонки, хотя потихоньку его начинает теснить флексбокс. По умолчанию два блока в нормальном потоке не могут стоять на одной строке, но это поведение можно легко изменить, прописав обоим свойство float: left | right. Они начнут прижиматься к левому или правому краю. Чтобы идущий за ними блок воспринял плавающие блоки и разместился правильно, ему нужно прописать clear: both.

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

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

Поскольку ячейкам в таблице можно задавать любые размеры, раньше с их помощью верстали почти все сайты. Например, для реализации простейшего макета (шапка, контент, сайдбар, футер), в таблице делали три строки (строка таблицы формируется тегом tr). Каждая строка содержит две ячейки, потому что контент и сайдбар должны располагаться отдельно друг от друга. А в шапке и футере эти ячейки просто соединяли с помощью атрибута colspan у тега td, если это было необходимо.

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

С помощью флексбокса. Это современная технология, которая начала распространяться в 2014 году, хотя существовала и до этого. Ее суть заключается в следующем: создается один общий блок контейнер, в который помещаются другие блоки, которые нужно будет сделать в виде колонок, потом этому контейнеру нужно прописать display: flex.

Далее обычно задается свойство flex-direction, которое определяет направление главной оси, по которой будут расположены блоки. В качестве значений можно задать: row и column. Первое значение направит блоки по горизонтали справа налево, второе – вниз. Также можно задать реверс: flex-direction: row-reverse. Блоки расположатся справа налево.

А дальше начинается игра с другими свойствами флекс-контейнера: выравнивание по главной и поперечной оси, управление переносом блоков на новую строку.

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

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

Разбиение текста на колонки

Тем не менее, я до сих пор не затронул самую главную тему. CSS сегодня предлагает возможность разбить текст в основном блоке без помощи плавающих блоков, таблиц или флексбоксов. То есть в html остается один обычный блок, а текст делится на колонки исключительно благодаря css.

Итак, нижеперечисленные свойства применяются к блоку, в котором текст нужно разбить в несколько колонок.

Column-count – свойство задает количество колонок, на которое нужно разбить текст. Рекомендуется выставлять значение от 2 до 4, в зависимости от того, как вам больше нравится.

Column-width – задает количество символов текста в одной колонке. Я подчеркиваю, ширина колонки в данном случае задается не пикселами, а количеством символов. Оптимально: 30-50 символов в одной колонке. Также это свойство никак нельзя назвать кроссбраузерным, потому что вы выставляете только желаемое количество символов, но поступит ли браузер в согласии с вашими пожеланиями, это еще неизвестно.

Column-gap – определяет промежуток между колонками. Можно задавать в пикселях.

Column-rule – рисует линию, разделяющую колонки. Синтаксис свойства полностью повторяет свойство border. Сначала записывается толщина линии, потом ее тип, а потом цвет.

Также я хотел бы упомянуть, что все эти css-свойства являются относительно новыми. Например, Internet Explorer поддерживает их только с десятой версии. Это свойства из стандарта CSS3, поэтому если вы их собираетесь применять на своем сайте, то нужно позаботиться о кроссбраузерности, иначе в старых версиях оперы и IE никаких колонок не будет.

Примеры

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

.float-block1{
	float: left
}
.float-block2{
	float: left
}
блок, который должен стоять ниже плавающих{
	clear: left | both
}

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

А теперь сделаем самое интересное. Давайте добавим много случайного текста в основной блок и попробуем отображать его там в три колонки, как в газете или журнале. Для этого в код этому блоку нужно дописать такие правила:

-webkit-column-count: 3;
-webkit-column-width: 33;
-webkit-column-rule: 1px solid red;
-webkit-column-gap: 5px

Как видите, я везде поставил префикс webkit, чтобы свойства работали в Google Chrome. Для Mozilla нужно использовать префикс –moz. Итак, что же получилось?

Итак, верстка в 3 колонки на css возможна даже без добавления новых блоков. Мы задали количество колонок, их ширину, разделитель и горизонтальный отступ между ними. Конечно, свойства имеют огромный минус – они не кроссбраузерны.

Сегодня мы рассмотрели с вами множество способов сделать колонки с помощью html и css. Подписывайтесь на наш блог и получайте еще больше полезной информации по сайтостроению.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree