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

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

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

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

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

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