css властивість column-width
Властивість column-width задає ширину стовпчика в багатоколонковому тексті.
Властивість column-width визначає мінімальну ширину стовпця. Кількість стовпчиків буде максимальною кількістю стовпців, які можуть вміститися у контейнер, без стовпця, що має ширину менше, ніж значення column-width. Фактична ширина стовпчика може бути меншою, ніж значення ширини стовпчика, якщо ширина контейнера менша.
Це дозволяє створити елементи, які відповідають різним розмірам екрана. Особливо за наявності властивості column-count, яка має пріоритет, для встановлення точної ширини стовпчика, усі значення довжини повинні бути
вказані. У горизонтальному тексті це width, column-width, column-gap, та column-rule-width
Ви можете вказати ширину стовпців як автоматичну (тобто auto) або конкретну величину довжини.
| Нотатка: | Реальна ширина колонки може бути більшою за вказане вами значення. |
| Порада: | Ви також можете використовувати властивість |
Синтаксис
column-width: auto|length|initial|inherit;Властивість column-width може отримувати 4 значення:
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.columnWidth="100px" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| column-width | 1.0 -webkit- |
10 |
1.5 -moz- |
3.0 -webkit- |
11.1 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| column-width | 1.0 -webkit- |
1.0 -moz- |
3.0 -webkit- |
Мобільних переглядачів ще не додано.
Приклади
Значення у дії
Приклад використання
Синтаксис
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
-moz-column-width: 100px; /* Firefox */
column-width: 100px;
}