CSS column-fill Свойство
Пример
Укажите, как заполнять столбцы:
.newspaper1 {
-moz-column-fill: auto; /* Firefox */
column-fill: auto;
}
.newspaper2 {
-moz-column-fill:
balance; /* Firefox */
column-fill: balance;
}
Подробнее примеры ниже.
Определение и использование
Свойство column-fill
указывает, как заполнять столбцы сбалансированными или нет.
Совет: При добавлении высоты к элементу с несколькими столбцами можно управлять тем, как содержимое заполняет столбцы. Содержимое может быть сбалансировано или заполнено последовательно.
Значение по умолчанию: | balance |
---|---|
Inherited: | no |
Animatable: | no. Читайте о animatable |
Version: | CSS3 |
Синтаксис JavaScript: | object.style.columnFill="auto" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номер -moz- Укажат первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
column-fill | 50 | 10 | 52.0 13.0 -moz- |
10.0 7.0 -webkit- |
37 |
Синтаксис CSS
column-fill: balance|auto|initial|inherit;
Значения свойств
Значение | Описание |
---|---|
balance | Значение по умолчанию. Заполняет каждый столбец примерно одинаковым объемом содержимого, но не позволяет столбцам быть выше высоты (таким образом, столбцы могут быть короче, чем высота, поскольку обозреватель распределяет содержимое равномерно по горизонтали) |
auto | Заполняет каждый столбец до тех пор, пока он не достигнет высоты, и сделать это до тех пор, пока он заканчивается содержание (так, это значение не обязательно заполнить все столбцы, ни заполнить их равномерно) |
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Разделите текст в элементе <div> на три столбца:
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Пример
Укажите зазор в 40 пикселей между столбцами:
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Пример
Укажите ширину, стиль и цвет правила между столбцами:
div
{
-webkit-column-rule: 4px double #ff00ff; /* Chrome, Safari, Opera */
-moz-column-rule: 4px
double #ff00ff; /* Firefox */
column-rule: 4px double #ff00ff;
}
Похожие страницы
CSS Справочник: CSS Несколько столбцов
HTML DOM Справочник: columnFill Свойство