CSS свойство column-count
разбивает содержимое элемента на заданное число столбцов.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Синтаксис
/* Значение, заданное ключевым словом */
column-count: auto;
/* целое значение */
column-count: 3;
/* глобальные значения */
column-count: inherit;
column-count: initial;
column-count: unset;
Значения
auto
- Количество столбцов определяется другими свойствами CSS, такими как
column-width
. <integer>
- Является строго положительным
<integer>
, описывающим идеальное число столбцов, в которые будет стекаться содержимое элемента. Еслиcolumn-width
. также, не установлено в значение -auto
, оно указывает максимально допустимое число столбцов.
Formal syntax
Пример
HTML
<p class="content-box">
This is a bunch of text split into three columns
using the CSS `column-count` property. The text
is equally distributed over the columns.
</p>
CSS
.content-box {
column-count: 3;
}
Result
Спецификации
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout Module Определение 'column-count' в этой спецификации. |
Рабочий черновик | Первое определение. |
Начальное значение | auto |
---|---|
Применяется к | Block containers except table wrapper boxes |
Наследуется | нет |
Обработка значения | как указано |
Animation type | целое число |
Поддержка браузерами
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Смотрите также
- Multiple-column Layout (Learn Layout)
- Basic Concepts of Multicol