CSS3 - многостолбцовые макеты

135

Инновации спецификации CSS3 в области отображения текста не ограничивают новыми шрифтовыми возможностями. В нее также был добавлен абсолютно новый модуль для размещения текста в несколько колонок, таким образом предоставляя разработчикам гибкое средство для решения проблемы длинного текста без потерь его читаемости. Создание нескольких колонок текста не требует почти никаких усилий и может быть выполнено двумя способами. Первый подход — это установить количество требуемых колонок с помощью свойства column-count, как показано в следующем коде:

.Content {
   text-align:justify;
   column-count:3;
}

На момент написания этих строк данный метод был совместим только с браузером Opera. Для браузеров Firefox, Chrome и Safari это свойство используется с префиксом разработчика браузера:

.Content {
   text-align:justify;
   -moz-column-count: 3;
   -webkit-column-count: 3;
   column-count:3;
}

Как обычно, браузер Internet Explorer 9 не поддерживает эту возможность вообще, хотя, скорее всего, его следующая версия, IE 10, такую поддержку будет предоставлять.

Указание точного числа колонок лучше всего подходит для веб-страниц с компоновкой фиксированного размера. Но если размеры компоновки меняются в соответствии с размерами окна браузера, ширина колонок может оказаться слишком большой и текст в них будет трудно читать. Во избежание такой проблемы лучше не устанавливать точное число колонок, а дать указание браузеру, каким должен быть размер каждой колонки, используя свойство column-width, как показано далее:

.Content {
   text-align:justify;
   -moz-column-width: 10em;
   -webkit-column-width: 10em;
   column-width: 10em;
}

Таким образом, браузер может создать такое количество колонок, которое необходимо для заполнения имеющегося пространства:

Пример нескольких колонок

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

Можно также настроить размер промежутка, между колонками (свойство column-gap) и даже вставить вертикальную разделительную линию между ними (свойство column-rule). Дополнительную информацию обо всех возможностях форматирования колонок, включая способы управления разбиением текста между колонками и методы для перехода фигур и других элементов из одной колонки в другую, см. в полном стандарте по колонкам по адресу www.w3.org/TR/css3-multicol. К сожалению, на момент написания этих строк эти продвинутые возможности не поддерживались ни одним браузером.

Пройди тесты
Лучший чат для C# программистов