Разбивка текста на колонки с помощью 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;
}

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

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

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

 

Иногда требуется получить колонки строго определенной ширины. В этом случае следует использовать свойство 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 у меня не заработал. Ослики продолжают показывать текст во всю ширину колонки. Причина такого поведения пока остается неизвестной.

 

text seo code

__________________________________________________________________________________________________________________

скачать joomla | обновление joomla | модуль joomla | администрирование | seo продвижение | joomla магазиншаблоны сайтов

обратная связь 

При копировании материала ссылка на сайт joomla4.ru обязательна.