html.okpython.net
Основы создания сайтов
CSS :: Свойство columns
Сокращенное css-свойство columns (от англ. columns – колонки) позволяет одновременно задавать как ширину, так и количество колонок многоколоночного текста.
Характеристики
- Значение по умолчанию: auto.
- Применяется: к блочным элементам (за исключением таблиц), а также ячейкам и к элементам, у которых значение свойства display установлено в inline-block.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.columns="value".
Синтаксис
columns: column-width || column-count
Значения
Можно указывать через пробел значения свойств column-width и column-count задавая тем самым ширину и количество колонок в одном месте. При этом значения могут быть указаны в любом порядке. Если какое-то из значений указано не будет, браузер использует для него соответствующее значение по умолчанию.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-multicol-1/#propdef-columns
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/columns
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ width: 400px; margin: 2em; padding: 0.7em; border: 1px solid green; } /* Разбиваем на две колонки по 150px */ .p_1{ columns: 150px 2; } /* Может вместиться только 2 колонки по 150px */ .p_2{ columns: 150px 3; } /* Может вместиться 7 колонок, но задано только 3, */ /* поэтому column-width просто игнорируется */ .p_3{ columns: 50px 3; } /* Вместится 4 колонки по 80px */ .p_4{ columns: 80px; } /* Просто делим на 4 колонки */ .p_5{ columns: 4; } </style> </head> <body> <p class="p_1"> Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p> <p class="p_2"> Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p> <p class="p_3"> Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p> <p class="p_4"> Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p> <p class="p_5"> Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p> </body> </html>
Пример №1