Свойство ширины столбца CSS
Пример
Укажите, что ширина столбца должна быть 100px:
div
{
column-width: 100px;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство column-width
указывает ширину столбца.
Количество столбцов будет минимальным количеством столбцов, необходимым для отображения всего содержимого элемента.
column-width
является гибким свойством. Думайте о
column-width
минимальной ширине для браузера. Как только браузер не может вместить как минимум два столбца указанной ширины, столбцы остановятся и переместятся в один столбец.
Значение по умолчанию: | авто |
---|---|
Унаследовано: | нет |
Анимация: | да. Читать об анимации |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.columnWidth="100px" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.
Property | |||||
---|---|---|---|---|---|
column-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
Синтаксис CSS
column-width: auto|length|initial|inherit;
Значения свойств
Value | Description | Play it |
---|---|---|
auto | Default value. The column width will be determined by the browser | |
length | A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units | |
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: свойство columnWidth