Главная > CSS/Style Sheets > Разметка в несколько столбцов (журнальная разметка) на CSS3

Разметка в несколько столбцов (журнальная разметка) на CSS3


29 октября 2012, 13:30. Разместил: Design FactoRy
Обычно люди теряют мысль при чтении длинных полотен текста. Именно поэтому печатные СМИ вроде журналов или газет, делят контент на несколько колонок, чтобы текст легче воспринимался и читался.

Разметка в несколько столбцов (журнальная разметка) на CSS3
Разметка журнала от Ronel van Heerden

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

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

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

Множественные колонки сегодня поддерживаются во всех браузерах – Firefox 2+, Chrome 4+, Safari 3.1+ и Opera 11.1, за исключением, конечно же, IE, но следующая версия, IE10, также должна поддерживать этот модуль.

Что касается остальных браузеров, для того, чтобы этот модуль заработал, для Firefox понадобится прописать префикс –moz-, а для Chrome и Safari нужен будет префикс –webkit-. Для Opera не нужно ничего дополнительного.

Создание нескольких колонок

Перед созданием колонок нам нужно подготовить несколько абзацев текста для демонстрации, обернутых в HTML5-тег «article».

<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,
rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.
Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit
amet tincidunt orci placerat in. Integer vitae consequat augue.

//and so on
</article>

…а затем указать ширину 600 пикселей при помощи каскадной таблицы стилей.

Теперь давайте приступим к созданию колонок.

Журнальная разметка с использованием column-count

В нижеприведенном примере мы разделим контент на две колонки посредством параметра column-count. Этот параметр будет сообщать браузеру, что контент нужно генерировать в указанном количестве колонок, и браузер должен выставлять ширину каждой колонке.

Разметка в несколько столбцов (журнальная разметка) на CSS3

article {  
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
}

* Демо column-count

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

Журнальная разметка с использованием column-width

В данном примере мы указываем ширину колонки 150 пикселей, что в результате приводит к сортировке контента в три колонки.

Разметка в несколько столбцов (журнальная разметка) на CSS3

article {
-moz-column-width: 150px;
-webkit-column-width: 150px;
column-width: 150px;
}

Как указано в спецификации, текущая ширина колонки может быть шире или уже, чем указанная ширина колонки, в зависимости от доступного свободного пространства. Также, если значение ширины не указано, то в качестве исходного значения будет выставлено auto, которое также означает «отсутствие колонки».

* Демо с column-width

Журнальная разметка с использованием column-gap

Column Gap определяет пространство, которое отделяет каждую колонку. Значение расстояния может быть указано в em или px, но как указано в спецификации, значение не может быть отрицательным. В нижеприведенном примере мы указываем 30 пикселей расстояния, и поэтому пространство между колонками выглядит немного шире.

Разметка в несколько столбцов (журнальная разметка) на CSS3

article {	
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
}

* Демо column-gap

Журнальная разметка с использованием column-rule

Если вам захочется добавить границы между колонками, вы можете использовать параметр column-rule, который работает примерно так же, как и параметр border. Так что, предположим, если нам нужно добавить точечную границу между колонками, мы можем использовать код:

Разметка в несколько столбцов (журнальная разметка) на CSS3

article {
-moz-column-rule: 1px dotted #ccc;
-webkit-column-rule: 1px dotted #ccc;
column-rule: 1px dotted #ccc;
}

* Демо column-rule

Журнальная разметка с использованием column-span

Данный параметр работает примерно так же, как и colspan в теге table. Основное назначение данного параметра заключается в создании сносок для заголовка, который бы распространялся на все колонки. Давайте посмотрим на следующий пример.

Разметка в несколько столбцов (журнальная разметка) на CSS3

article h1 {
-webkit-column-span: all;
column-span:all;
}

В вышеприведенном примере мы сделали так, чтобы h1 распространялся на всех колонках, и если span колонок будет определен, 1 будет взят как умолчание. К сожалению, этот параметр, на данный момент будет работать только в Opera и Chrome.

* Демо column-span

В завершение

На сегодня всё! Мы рассказали вам о нескольких самых распространенных методах создания нескольких колонок на сайте при помощи CSS3 и, как мы упоминали в самом начале, данный модуль работает практически во всех современных браузерах, но пока что не будет работать в Internet Explorer, но эта проблема решается при помощи javascript-библиотеки.

Надеемся, что теперь у вас есть четкое представление того, как создавать колонки при помощи CSS3, и если у вас есть время на эксперименты, то не стесняйтесь делиться результатами проделанной вами работы здесь с другими читателями. Спасибо за чтение и за то, что были с нами!

Демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.

Вернуться назад