css текст в две колонки

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

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

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

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

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

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

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

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

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

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

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

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

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

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53801b128afbbedd • Your IP : 78.85.5.224 • Performance & security by Cloudflare

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

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-gap и column-rule не указаны, линия между колонок не отображается, но некоторое минимальное расстояние между колонок в любом случае сохраняется.

Оцените статью