В 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.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.