С появлением великого множества экранов разных размеров и разрешений, стало невероятно непрактично создавать дизайны с фиксированными блоками текста, которые занимают всю ширину экрана. Традиционный подход заключается в разделении текста на две колонки, и часто это реализуется вручную, и требует существенных временных затрат. Либо текст разделяется при помощи javascript, который подходит не для всех ситуаций. Кроме того, у нас ведь должна быть возможность реализовать это при помощи CSS, не прибегая к использованию сеточных систем или плавающих элементов, разве нет?

CSS3, на самом деле, предоставляет вам возможность разделить текст на несколько колонок, а также выставить размер канавок (расстояние между колонками), и таким образом, вы можете получить полный контроль над колонками, вместо того, чтобы использовать фреймворк или сеточную систему.

Кроме того, CSS3 предоставляет отличные запасные варианты на случай, когда пользователь использует, к примеру, Netscape Navigator – верстка вашего сайта по-прежнему будет выглядеть замечательно.

Браузерная поддержка

Важно отметить, что, несмотря на то, что практически все современные браузеры поддерживают множественные колонки на CSS3 (да-да, даже IE10), многие предыдущие браузеры вроде IE9 не предоставляют такой поддержки. Хотя поддержка довольно хорошая, вам, возможно, придется использовать браузерные префиксы для webkit (-webkit-) и mozilla (-moz-). Тем не менее, вам не придется использовать -ms- или -o- для IE и Opera, так как они оснащены либо полной поддержкой, либо частичной.

Данное CSS-свойство дает вам довольно много параметров контроля над тем, как ваш контент выводится в окне браузера, и давайте познакомимся с этими параметрами:

* column-count : здесь вы можете указать количество колонок, которое должно быть отображено в элементе.
* column-width : ширина отдельной колонки. Будьте готовы к тому, что иногда браузеры самостоятельно изменяют это значение.
* column-gap : ширина бороздки между колонками.
* column-rule-width : это нечто вроде границ ваших колонок, и здесь вам нужно указать ширину именно границы.
* column-rule-style : тоже что-то вроде границы, если вам потребуется выставить стиль.
* column-rule-color : этот параметр нужен для указания цвета.
* column-span : это значение сообщает браузеру о том, сколько колонок вы хотите объединить – его хорошо использовать для заголовков, и работает оно как colspan и rowspan в таблицах.

Имея все эти опции, нам не кажется, что понадобится что-то еще для управления колонками. Конечно же, для нормальной работы нескольких колонок нам не обязательно нужны все эти параметры. Более того, в основном, нам нужен лишь параметр column-count, но вы наверняка всегда будете использовать также column-gap, чтобы текст колонки не сливался с ее границами.

Чтобы реализовать это на практике, нам понадобится всего пара строк кода:

/* This will produce a 3 column layout with a gap of 20px between each column */
.cols3 {
column-count: 3;
column-gap: 20px;
}
Если вы также хотите применить к колонкам правило, то вам нужно будет добавить эти параметры:

/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */
.cols3 {
column-count: 3;
column-gap: 20px;
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: #000;
}
Как и в широко известном параметре border, вы можете применять цвет, стиль и ширину следующим образом:

Cols3 {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid #000;
}
Если у вас есть заголовок, и вам нужно, чтобы этот заголовок простирался на всю ширину всех колонок, то вам нужно добавить следующую строку кода:

/*This h1 will take up the space of the 3 columns*/
.cols3 h1{
column-span: all;
}
Вы можете применить этот метод практически к любому HTML-коду, от отдельного абзаца до нескольких "div"-элементов. Давайте рассмотрим демо:

А сейчас хотим предложить вам завершенный код данного эффекта:

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

Стилизуете ли вы колонки при помощи CSS3, или до сих пор используете плавающие элементы и позиционирование? Какие методы вы используете, чтобы обойти проблемы, возникающие в старых браузерах? Поделитесь с нами в комментариях.

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

CSS3 предлагает сразу четыре свойства для создания и управления колонками: column-count , column-gap , column-width и column-rule . Для наглядности значения некоторых свойств показаны на рис. 1.

Рис. 1. Стилевые свойства для колонок

• column-count — устанавливает оптимальное число колонок.
• column-gap — расстояние между колонками.
• column-width — оптимальная ширина колонок.
• column-rule — разделительная линия между колонками.

Следует пояснить, что такое «оптимальное число» и «оптимальная ширина». Свойство column-count задаёт не точное количество колонок, а скорее желаемое. Браузер постарается разбить текст именно на столько колонок, но при уменьшении размеров окна будет сокращать число колонок, чтобы сохранить комфортность чтения. Аналогично обстоит и с шириной. Свойство column-width указывает минимальную ширину колонки, при этом браузер это значение может проигнорировать, если размер окна недостаточен для обеспечения заданной ширины колонок.

Браузер Chrome и Safari понимают эти свойства только с префиксом -webkit, а Firefox только с префиксом -moz. Комбинируем свойства для разных браузеров и получаем код, который создаёт трёхколоночный текст (пример 1).

Пример 1. Три колонки

HTML5 CSS 3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера в браузере Chrome показан на рис. 2. Вместо трёх колонок мы наблюдаем две из-за малой ширины окна браузера. При увеличении размеров окна число колонок вырастет до заданного, при дальнейшем уменьшении ширины окна, наоборот, количество колонок сократится до одной.

Рис. 2. Многоколоночный текст

Чтобы урезать набор применяемых стилевых свойств, можно воспользоваться универсальным свойством columns , оно одновременно устанавливает ширину колонок и их число (пример 2).

Пример 2. Использование columns

Column { -webkit-columns: 200px 3; -moz-columns: 200px 3; columns: 200px 3; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; -webkit-column-rule: 1px solid #ccc; -moz-column-rule: 1px solid #ccc; column-rule: 1px solid #ccc; }

Опять же, для работы некоторых браузеров требуется добавить свои префиксы. Расстояние между колонок и параметры разделительной линии, если это требуется, приходится задавать дополнительными свойствами. Если column-gap и column-rule не указаны, линия между колонок не отображается, но некоторое минимальное расстояние между колонок в любом случае сохраняется.

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

Разметка страницы

HTML часть

Определим две колонки, которые в дальнейшем будем делать одинаковой высоты с помощью CSS:

То есть нам необходимо сделать так, чтобы блок