Укажите, что ширина столбца должна составлять 100 пикселей:
div
{
column-width: 100px;
}
Попробуйте сами »
Определение column-width
CSS свойство column-width определяет ширину столбца..
Количество столбцов будет минимальным количеством столбцов, необходимым для отображения всего содержимого элемента.
column-width является гибким свойством. Подумать о column-width в качестве рекомендации по минимальной ширине для браузера. Как только браузер не сможет вместить по крайней мере два столбца указанной вами ширины, столбцы остановятся и объединятся в один столбец.
| Значение по умолчанию: | auto |
|---|---|
| Унаследовано: | no |
| Анимируемый: | yes. Читайте о animatable Попробуй |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.columnWidth="100px" Попробуй |
Поддержка column-width
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следуют -webkit- или -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 |
Синтаксисcolumn-width
column-width: auto|length|initial|inherit;
Значения column-width
| Значение | Описание | Демонстрация |
|---|---|---|
| auto | Значение по умолчанию. Ширина столбца будет определяться браузером | Демо ❯ |
| length | Длина, которая определяет размер столбцов. Количество столбцов будет минимальным количеством столбцов, необходимым для отображения всего содержимого элемента. Читайте о единицы измерения длины | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры column-width
Укажите ширину, стиль и цвет правила между столбцами:
div
{
column-rule: 4px double #ff00ff;
}
Попробуйте сами »
Страницы по теме column-width
CSS Учебник: CSS Несколько столбцов
HTML DOM справочник: columnWidth свойство