В CSS3 появился модуль многоколоночной разметки для создания нескольких разметок колонок простым и эффективным способом. Теперь вы можете создавать макеты, похожие на журнальную или газетную разметку, не используя свойство float
. Вот простой пример разделения некоторого текста на три столбца с помощью функции многостолбцовой разметки CSS3.
p {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3; /* Standard syntax */
}
Настройка количества столбцов и ширины
Свойство column-count
устанавливает количество столбцов внутри многоколоночного элемента, тогда как свойство column-width
устанавливает желаемую ширину столбцов.
p {
-webkit-column-width: 150px; /* Chrome, Safari, Opera */
-moz-column-width: 150px; /* Firefox */
column-width: 150px; /* Standard syntax */
}
Ширина столбца column-width
описывает оптимальную ширину столбца. Однако фактическая ширина столбца может быть шире или уже в зависимости от доступного пространства. Это свойство не должно использоваться со свойством column-count
.
Настройка пространства между колонками
Вы можете контролировать расстояние между столбцами, используя свойство column-gap
. Расстояние по умолчанию установлено normal
, что эквивалентно 1em
.
p {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 100px;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 100px;
/* Standard syntax */
column-count: 3;
column-gap: 100px;
}
Настройка правил столбца
Вы также можете добавить строку между столбцами, используя свойство column-rule
. Это короткое свойство для задания ширины, стиля и цвета в одном свойстве. Свойство column-rule
принимает те же значения, что и border
и outline
.
p {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 100px;
-webkit-column-rule: 2px solid red;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 100px;
-moz-column-rule: 2px solid red;
/* Standard syntax */
column-count: 3;
column-gap: 100px;
column-rule: 2px solid red;
}
Правило column-rule
не влияет на ширину блоков столбцов, но если column-rule
шире, чем зазор, смежные блоки столбцов будут его перекрывать.
CSS3-свойства Multiple Columns
В следующей таблице приведен краткий обзор всех свойств нескольких столбцов:
Свойство | Описание |
---|---|
column-count |
Определяет количество столбцов внутри многоколоночного элемента. |
column-fill |
Определяет, как контент распределяется по столбцам. |
column-gap |
Определяет расстояние между столбцами. |
column-rule |
Определяет прямую линию, которая будет проведена между каждым столбцом. |
column-rule-color |
Определяет цвет «правила» между столбцами. |
column-rule-style |
Определяет стиль «правила» между столбцами. |
column-rule-width |
Определяет ширину «правила» между столбцами. |
column-span |
Определяет, сколько столбцов элемент охватывает. |
column-width |
Определяет оптимальную ширину столбцов. |
columns |
Сокращенное свойство для одновременной установки свойств column-width и column-count . |