CSS column-width Свойство
Пример
Укажите, что ширина столбца должна быть 100px:
div
{
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
-moz-column-width: 100px; /* Firefox */
column-width: 100px;
}
Подробнее примеры ниже.
Определение и использование
Свойство column-width задает ширину столбца.
Число столбцов будет минимальным числом столбцов, необходимых для отображения всего содержимого элемента.
column-widthявляется гибким свойством. Подумайте о в column-width качестве минимальной ширины предложение для браузера. После того, как браузер не может вместить по крайней мере два столбца по заданной ширине, столбцы будут останавливаться и падать в один столбец.
| Значение по умолчанию: | auto |
|---|---|
| Inherited: | no |
| Animatable: | yes. Читайте о animatable |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.columnWidth="100px" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| 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;
Значения свойств
| Значение | Описание | |
|---|---|---|
| auto | Значение по умолчанию. Ширина столбца будет определяться обозревателем | |
| length | Длина, указывающая ширину столбцов. Число столбцов будет минимальным числом столбцов, необходимых для отображения всего содержимого элемента. Читать о единицах длины | |
| 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 Справочник: columnWidth Свойство