HTML и CSS - революция в мире web-дизайна!

- управление отображением множества документов с помощью каскадных таблиц стилей

- Более точный контроль над внешним видом web-документов

- Различные представления для разных носителей информации

- Сложная и проработанная техника дизайна

Главная / HTML и CSS рецепты / Разбивка текста на колонки с помощью CSS3

Разбивка текста на колонки с помощью CSS3

Итак, есть блок с текстом. Что бы максимально приблизить задачу к реальности, создадим следующую html разметку:

	<h2>Много колоночный текст средствами css3</h2>
	<div class="text_demoBlock">
		<p>Эрмитаж возник в 1764 как частное собрание Екатерины II, после того как в Берлине через агентов она приобрела у коммерсанта И. Горьковского коллекцию из 220 произведений голландских и фламандских художников. Поначалу большинство картин размещалось в уединённых апартаментах дворца, получивших французское название «Эрмитаж» (место уединения).</p>
		<p>В 1769 году в Дрездене для Эрмитажа была приобретена богатая коллекция саксонского министра графа Брюля, насчитывавшая около 600 картин, в том числе пейзаж Тициана «Бегство в Египет», виды Дрездена и Пирны кисти Беллотто и пр.</p>
		<p>Важнейшую роль для Эрмитажа сыграла покупка Екатериной в Париже коллекции живописи барона Кроза в 1772. Это собрание во многом предопределило «лицо» картинной галереи. Преобладали картины итальянских, французских, фламандских и голландских мастеров XVI—XVIII века. В их числе — «Святое Семейство» Рафаэля, «Юдифь» Джорджоне, «Даная» Тициана, картины Рембрандта, произведения Рубенса, Ван Дейка, Пуссена, пейзажи Клода Лоррена и работы Ватто.</p>
		<p>Коллекция живописи британского премьер-министра Уолпола, приобретенная в 1779, добавила ряд шедевров Рембрандта (среди них «Жертвоприношение Авраама» и «Немилость Амана») и группу портретов кисти Ван Дейка. Импульсом к развитию графического собрания послужило приобретение более 5 тысяч рисунков из коллекции Кобенцля в Брюсселе в 1781, в которой находился портрет неизвестного работы Фуке.</p>
		<p>Еще одной значительной покупкой Екатерины стала коллекция английского банкира Лайд-Брауна, которая включала скульптуру Микеланджело «Скорчившийся мальчик», а также античные статуи и бюсты. В Париже была куплена коллекция резных камней герцога Орлеанского. Кроме того, Екатерина заказывала работы Шардену, Гудону, Рентгену и другим мастерам. Ею же были приобретены библиотеки Вольтера и Дидро. В посмертной описи имущества Екатерины 1796г перечисляются 3996 картин.</p>		
	</div>

Весь текст, который требуется представить в виде колонок, обернем в div и применим к нему следующие стили:

.text_demoBlock {
padding-bottom:20px; /*отступ снизу*/
width:100%; /*указываем общую ширину блока с колонками*/
text-align:justify; /*выравнивание текста внутри колонок*/
column-count: 3; /*количество колонок, на которое хотим разбить текст*/
-moz-column-count: 3; /*для мозилы*/
-webkit-column-count: 3; /*для webkit браузеров*/
column-gap: 40px; /*отступ между колонками*/
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-rule: 1px solid #000; /*если требуется по дизайну, разделяем колонки линией*/
-moz-column-rule: 1px solid #000;
-webkit-column-rule: 1px solid #000;
}

Все, наш текст автоматически разбит на три колонки, разделенные вертикальными линиями.

Демо пример приведенного выше кода

Эрмитаж возник в 1764 как частное собрание Екатерины II, после того как в Берлине через агентов она приобрела у коммерсанта И. Горьковского коллекцию из 220 произведений голландских и фламандских художников. Поначалу большинство картин размещалось в уединённых апартаментах дворца, получивших французское название «Эрмитаж» (место уединения).

В 1769 году в Дрездене для Эрмитажа была приобретена богатая коллекция саксонского министра графа Брюля, насчитывавшая около 600 картин, в том числе пейзаж Тициана «Бегство в Египет», виды Дрездена и Пирны кисти Беллотто и пр.

Важнейшую роль для Эрмитажа сыграла покупка Екатериной в Париже коллекции живописи барона Кроза в 1772. Это собрание во многом предопределило «лицо» картинной галереи. Преобладали картины итальянских, французских, фламандских и голландских мастеров XVI—XVIII века. В их числе — «Святое Семейство» Рафаэля, «Юдифь» Джорджоне, «Даная» Тициана, картины Рембрандта, произведения Рубенса, Ван Дейка, Пуссена, пейзажи Клода Лоррена и работы Ватто.

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

.text_demoBlock {
padding-bottom:20px; /*отступ снизу*/
width:100%; /*указываем общую ширину блока с колонками*/
text-align:justify; /*выравнивание текста внутри колонок*/
column-width: 200px; /*указываем ширину колонок*/
-moz-column-width: 200px;
-webkit-column-width: 200px;
column-gap: 40px; /*отступ между колонками*/
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-rule: 1px solid #000; /*если требуется по дизайну, разделяем колонки линией*/
-moz-column-rule: 1px solid #000;
-webkit-column-rule: 1px solid #000;
}

Радужную картину портят "ослики". В них текст по прежнему отобразится во всю ширину основного болка. Для того, что бы исправить ситуацию, можно воспользоваться скриптом css3-multi-column.js. Качаем и подключаем его в разделе head страницы, спрятав в условные комментарии.

<head>
	<!--[if IE]>
	<script type="text/javascript" src="/папка со скриптами/css3-multi-column.js"></script>
	<![endif]-->
</head>

Теперь и шедевры разработок от Microsoft отображают текст так, как нам нужно.

Возможные проблемы:

- если требуется расположить, например, списки, или определенные абзацы в строго определенных колонках, то описанным выше способом это сделать не получится (по крайней мере на сегодняшний день решение данной задачи мне найти не удалось);
- при подключении к Joomla 1.7 скрипт для IE у меня не заработал. Ослики продолжают показывать текст во всю ширину колонки. Причина такого поведения пока остается неизвестной.

Как альтернатива данному варианту, можно воспользоваться методом разбивки на колонки с помощью jQuery