CSS3 многостолбный макет

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

Создание многостолбцового макета

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

p {
　　　　-webkit-column-count: 3; /* Chrome, Safari, Opera */
　　　　　　　-moz-column-count: 3; /* Firefox */
　　　　　　　　　　　　column-count: 3;　
}

Настройка числа столбцов или ширины

Свойства CSS column-count и column-width определяют, будут ли отображаться столбцы и сколько их будет. Атрибут column-count устанавливает количество столбцов в элементе multicol, а атрибут column-width устанавливает ширину столбца.

p {
　　　　-webkit-column-width: 150px; /* Chrome, Safari, Opera */
　　　　　　　-moz-column-width: 150px; /* Firefox */
　　　　　　　　　　　　column-width: 150px;　
}

Настройка интервала между столбцами

Вы можете использовать атрибут 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;
　　　　
　　　　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;
　　　　
　　　　column-count: 3;
　　　　column-gap: 100px;
　　　　column-rule: 2px solid red;
}

Свойства многостолбчатого CSS3

Ниже приведено краткое описание всех многостолбчатых свойств: