Свойство CSS для заполнения столбцов
Пример
Укажите, как заполнять столбцы:
.newspaper1 {
column-fill: auto;
}
.newspaper2 {
column-fill: balance;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство column-fill
указывает, как заполнять столбцы, сбалансированные или нет.
Совет: если вы добавите высоту к элементу с несколькими столбцами, вы сможете управлять тем, как содержимое заполняет столбцы. Контент можно балансировать или наполнять последовательно.
Значение по умолчанию: | остаток средств |
---|---|
Унаследовано: | нет |
Анимация: | нет. Читать об анимации |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.columnFill="авто" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -moz-, указывают первую версию, которая работала с префиксом.
Property | |||||
---|---|---|---|---|---|
column-fill | 50.0 | 10.0 | 52.0 13.0 -moz- |
10.0 7.0 -webkit- |
37.0 |
Синтаксис CSS
column-fill: balance|auto|initial|inherit;
Значения свойств
Value | Description |
---|---|
balance | Default value. Fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally) |
auto | Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly) |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Дополнительные примеры
Пример
Разделите текст в элементе <div> на три столбца:
div
{
column-count: 3;
}
Пример
Укажите промежуток в 40 пикселей между столбцами:
div
{
column-gap: 40px;
}
Пример
Укажите ширину, стиль и цвет правила между столбцами:
div
{
column-rule: 4px double #ff00ff;
}
Связанные страницы
Учебное пособие по CSS: несколько столбцов CSS
Справочник по HTML DOM: свойство columnFill