СSS Свойство column-fill
Пример
Указать способ заполнения столбцов:
.newspaper1 {
-moz-column-fill: auto; /* Firefox */
column-fill: auto;
}
.newspaper2 {
-moz-column-fill:
balance; /* Firefox */
column-fill: balance;
}
Редактор кода »
Определение и использование
Свойство column-fill указывает, как заполнять столбцы, сбалансированные или нет.
Совет: Если вы добавляете высоту к элементу с несколькими столбцами, вы можете управлять тем, как содержимое заполняет столбцы. Содержимое может быть сбалансированной или заполняются последовательно.
| Значение по умолчанию: | balance |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет Прочитайте о animatable |
| Версия: | 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
