Пример
Укажите, как заполнять столбцы:
.newspaper1 {
column-fill: auto;
}
.newspaper2 {
column-fill: balance;
}
Попробуйте сами »
Определение column-fill
CSS свойство column-fill определяет, как заполнять столбцы, сбалансированно или нет.
Совет: Если вы добавляете высоту к элементу с несколькими столбцами, вы можете управлять тем, как содержимое заполняет столбцы. Содержимое может быть сбалансированным или заполняться последовательно.
| Значение по умолчанию: | balance |
|---|---|
| Унаследовано: | no |
| Анимируемый: | no. Читайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.columnFill="auto" Попробовать |
Поддержка column-fill
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -moz - указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| column-fill | 50.0 | 10.0 | 52.0 13.0 -moz- |
10.0 7.0 -webkit- |
37.0 |
Синтакси сcolumn-fill
column-fill: balance|auto|initial|inherit;
Значения column-fill
| Значение | Описание | Демонстрация |
|---|---|---|
| balance | Значение по умолчанию. Заполняет каждый столбец примерно одинаковым количеством содержимого, но не позволяет столбцам быть выше заданной высоты (таким образом, столбцы могут быть короче заданной высоты, поскольку браузер равномерно распределяет содержимое по горизонтали) | Демо ❯ |
| auto | Заполняет каждый столбец до тех пор, пока он не достигнет нужной высоты, и делайте это до тех пор, пока в нем не закончится содержимое (таким образом, это значение не обязательно заполнит все столбцы и не заполнит их равномерно). | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры column-fill
Пример
Укажите промежуток в 40 пикселей между столбцами:
div
{
column-gap: 40px;
}
Попробуйте сами »
Пример
Укажите ширину, стиль и цвет правила между столбцами:
div
{
column-rule: 4px double #ff00ff;
}
Попробуйте сами »
Страницы по теме column-fill
CSS Учебник: CSS Несколько столбцов
HTML DOM справочник: columnFill свойство