Макет CSS Multi-column
Разбить текст на несколько колонок, как в газете, легко с помощью модуля Макет CSS Multi-column.
Свойства CSS Multi-column
Вот свойства множественных колонок, которые рассматриваются здесь:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
CSS - Создание множественных колонок
Свойство column-count задаёт, на сколько колонок разделяется элемент.
Пример
Текст этого элемента <div> распределяется по 3 колонкам:
Prompt
Создайте HTML-страницу с элементом
<div>, содержащим длинный абзац текста Lorem Ipsum. Используйте CSS column-count: 3, чтобы разделить текст на 3 колонки.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-count</title>
<style>
div {
column-count: 3;
}
</style>
</head>
<body>
<h1>Divide Text Into 3 Columns</h1>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
Промежуток между колонками CSS
Промежуток между колонками задаёт свойство column-gap.
Пример
Эти колонки расположены на расстоянии 40 пикселей друг от друга:
Prompt
Создайте HTML-страницу с элементом
<div>, содержащим длинный абзац текста Lorem Ipsum. Используйте CSS column-count: 3 и column-gap: 40px, чтобы разделить текст на 3 колонки с промежутком в 40 пикселей между ними.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-gap</title>
<style>
div {
column-count: 3;
column-gap: 40px;
}
</style>
</head>
<body>
<h1>Specify Column Gap</h1>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
Подстраницы о колонках
Множественные колонки CSS продолжаются на этой подстранице:
- Разделительные линии колонок — рассматривает
column-rule,column-span,column-width
Свойства CSS множественных колонок
Вот все свойства множественных колонок и их назначение:
column-count— Задаёт общее количество колонок, на которые должен быть разделён элементcolumn-fill— Управляет способом заполнения колонокcolumn-gap— Задаёт промежуток, оставляемый между колонкамиcolumn-rule— Сокращённое свойство, задающее сразу все свойства column-rule-*column-rule-color— Задаёт цвет линии между колонкамиcolumn-rule-style— Задаёт стиль линии между колонкамиcolumn-rule-width— Задаёт ширину линии между колонкамиcolumn-span— Задаёт, сколько колонок занимает элементcolumn-width— Предлагает оптимальную ширину колонки, к которой следует стремитьсяcolumns— Сокращённое свойство, задающее одновременно column-width и column-count