CSS3 предоставляет новый способ расположения текста при помощи модуля расположения текста столбцами. Это свойство CSS3 поможет вам разбить текст на столбцы без дополнительной разметки, такой как плавающие блоки или дополнительной разметки таблиц.

Демонстрация работы

История создания и поддержка браузерами 

Проект этого модуля был опубликован очень давно — в 2001 году, но только в 2005 году, начиная с версии 1.5 beta браузера Firefox, основанной на движке Gecko 1.8, часть модуля расположения текста столбцами была поддержана.

Модуль расположения текста столбцами сейчас поддерживается всеми браузерами. Браузер Chrome поддерживает его с версии 1.0, Safari – с 3.0, Opera – c 11.1, а Internet Explorer — с 10.0. Но даже отсутствие поддержки в некоторых старых версиях браузеров не должно быть проблемой, пока мы пониманием и не забываем о постепенных улучшениях.

Согласно W3C, файл стилей может объявить, что содержимое элемента должно быть расположено в нескольких столбцах.

Как это можно использовать 

Для использования свойств этого модуля в браузерах Mozilla и Webkit нужно использовать приставки производителей -moz- and -webkit-.

CSS3 свойства модуля 

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

Давайте посмотрим на это в действии 

Есть два способа задать столбцы:

• column-count — сколько должно быть столбцов.
• column-width — какой ширины должен быть каждый столбец.

Количество столбцов

#multi-column1 {
  column-count: 3;
  column-gap: 20px;
  text-align: justify;
} 

Ширина столбцов

#multi-column2 {
  column-width: 200px;
  column-gap: 30px;
  text-align: justify;
} 

Кроме того Вы можете использовать сокращенное свойство columns. 

Разделитель столбцов 

Свойства column-count или column-width, задающие стили столбцам, можно дополнить следующим свойством, которое добавит границы между столбцами:

column-rule: 2px solid #9c9c9c; 

Заключение 

Это наиболее интересные свойства модуля расположения текста столбцами, но если Вы хотите узнать больше, Вы можете посетить страницу спецификаций W3C для детального ознакомления.

В примере мы показали, какие свойства были использованы в каждом варианте расположения текста столбцами. Надеемся, Вам понравился этот урок.

Автор урока Catalin Rosu

Перевод — Дежурка

Смотрите также:

• Применение режима наложения CSS3
• Создание изображений, поддерживающих экраны Retina, с использованием media query 
• Создаем круговые и эллиптические градиенты с использованием CSS3