Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
columns
Свойство CSS columns используется для одновременного указания количества и ширины колонок (столбцов) в многоколоночном элементе.
Тип свойства
Назначение: форматирование.
Применяется: к незамещаемым элементам уровня блока (кроме <TABLE> и элементов с display: table). К ячейкам таблиц — <TD>, <TH> и элементам с display: table-cell. А также к встроенным блокам — display: inline-block.
Наследуется: нет.
Значения
Значением свойства columns является одно или два (через пробел) значения его подсвойств.
Процентная запись: не существует.
Значение по умолчанию: зависит от значений по умолчанию каждого подсвойства columns.
Синтаксис
columns: column-count || column-width
Пример CSS: использование columns
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS свойство columns</title>
<style type="text/css">
body {
columns: 3 200px; /* рекомендуемое количество и ширина колонок */
column-gap: 1cm; /* расстояние между колонками */
column-rule: 2px #f00 dashed; /* стили линий между колонками */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetuer Morbi nibh tempus a neque. Sed dis non
Vestibulum tellus at adipiscing id interdum ipsum turpis. Malesuada orci Aliquam
habitant at nibh Phasellus dolor ut enim tortor. Fames id ac eget velit Nullam
porttitor laoreet Aenean Lorem Phasellus. Pede eros ligula et non libero neque Nam
congue dolor vel. Nam eget felis laoreet sed cursus libero Sed leo purus augue.</p>
</body>
</html>Версии CSS
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Нет | Нет | Нет | Да |
Браузеры
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | До 11.1 | 11.1 и выше | 3.1 и выше |
| Поддержка: | Нет | Нет | Нет | Нет | Да | Нет |