flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180etxt banner 468x60etxt banner 728x90etxt banner 930x180

Руководство по многоколоночным макетам в CSS3

В 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.
kwork banner 480x320kwork banner 728x90kwork banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600jivo banner 480x320jivo banner 728x90jivo banner 120x600

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

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

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

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

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

Руководство по свойству 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 для отдельных сторон используя…
Подробнее