smsc banner 468x60smsc banner 728x90smsc banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180

В 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.
etxt banner 480x320etxt banner 728x90etxt banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600smsc banner 480x320smsc banner 728x90smsc 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 для отдельных сторон используя…