CSS многоколоночная компоновка

The CSS многоколоночная компоновка module позволяет разделять контент на несколько колонок. Используя свойства в этом модуле, вы можете определить предпочтительное количество и ширину колонок, размер промежутка между колонками и визуальный вид необязательных разделительных линий колонок (известных как правила колонок). Вы также можете определить, как контент должен переходить от колонки к колонке и как разбивать контент между колонками.

Многоколоночная компоновка в действии

В этом примере речь 1967 года от имени столетия Канады, «Плач по Конфедерации» вождя Дана Джорджа, отображается в нескольких колонках, подобно тому, как статьи отображаются в печатных газетах. При включённом JavaScript доступны средства для изменения предпочтительного количества и ширины колонок, ширины промежутка между колонками, размещения заголовка и образца цитаты в одной колонке или их отображения во всех колонках, а также предотвращения разбиения текста внутри абзацев.

Примечание: Многоколоночная компоновка тесно связана с компоновкой для страниц. Каждая колонка — это фрагмент, так же как каждая напечатанная страница — фрагмент документа. Используя свойства, определённые в модуле разбиения CSS, вы можете управлять тем, как контент разбивается между колонками и страницами.

Справочник

Свойства

break-after
break-before
break-inside
column-fill
column-gap
column-span
column-rule сокращённое свойство
columns сокращённое свойство
- column-count
- column-width

Примечание: Имейте в виду, что установка высоты контейнера и длины строки может создать трудности для людей с нарушениями зрения или когнитивными нарушениями. Критерий успеха WCAG 1.4.8 гласит, что даже при удвоении размера текста контент не должен требовать прокрутки.

Руководства

Основные понятия многоколоночной компоновки: Обзор спецификации многоколоночной компоновки
Стиль колонок: Как использовать правила колонок и управлять интервалами между колонками.
Охватывание и балансировка: Как сделать элементы, охватывающие все колонки, и управлять заполнением колонок.
Обработка переполнения в многоколоночной компоновке: Что происходит, когда элемент переполняет колонку и что происходит, когда содержимое колонок слишком велико для контейнера.
Обработка разрывов содержимого в многоколоночной компоновке: Вступление к спецификации разбиения и управление тем, где происходит разрыв содержимого колонки.

Связанные понятия

orphans свойство CSS
widows свойство CSS
overflow свойство CSS
gap свойство CSS
height, max-height и block-size свойства CSS
width, max-width и inline-size свойства CSS
<line-style> перечисляемый тип данных
Блочный контекст форматирования руководство

Спецификации

Спецификация
CSS Многоколоночная компоновка Модуль уровня 1

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_multicol_layout