Разделительные линии колонок CSS
Эта страница охватывает свойства CSS column-rule, span и width.
Линия колонки CSS
Свойство column-rule-style задаёт стиль вертикальной линии между колонками. Свойство column-rule-width задаёт ширину этой линии. Свойство column-rule-color задаёт её цвет. Свойство column-rule является сокращённой записью для задания всех трёх сразу.
Стиль линии
Используйте column-rule-style, чтобы добавить сплошную вертикальную линию между колонками.
Prompt
Создайте страницу с div, содержащим несколько абзацев текста, разделённым на 3 колонки с помощью column-count. Примените column-rule-style: solid, чтобы показать сплошную вертикальную линию между колонками.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-rule-style</title>
<style>
div {
column-count: 3;
column-rule-style: solid;
}
</style>
</head>
<body>
<h1>CSS column-rule-style</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus. Nulla vitae sem nec diam vehicula fringilla.</p>
</div>
</body>
</html>
Ширина линии
Используйте column-rule-width, чтобы задать ширину вертикальной линии между колонками.
Prompt
Создайте страницу с div, содержащим несколько абзацев текста, разделённым на 3 колонки с помощью column-count. Примените column-rule-style: solid и column-rule-width: 1px, чтобы задать ширину вертикальной линии между колонками.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-rule-width</title>
<style>
div {
column-count: 3;
column-rule-style: solid;
column-rule-width: 1px;
}
</style>
</head>
<body>
<h1>CSS column-rule-width</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus. Nulla vitae sem nec diam vehicula fringilla.</p>
</div>
</body>
</html>
Цвет линии
Используйте column-rule-color, чтобы задать цвет вертикальной линии между колонками.
Prompt
Создайте страницу с div, содержащим несколько абзацев текста, разделённым на 3 колонки с помощью column-count. Примените column-rule-style: solid и column-rule-color: lightblue, чтобы окрасить вертикальную линию между колонками.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-rule-color</title>
<style>
div {
column-count: 3;
column-rule-style: solid;
column-rule-color: lightblue;
}
</style>
</head>
<body>
<h1>CSS column-rule-color</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus. Nulla vitae sem nec diam vehicula fringilla.</p>
</div>
</body>
</html>
Сокращённая запись линии
Используйте сокращённую запись column-rule, чтобы задать ширину, стиль и цвет вертикальной линии в одном объявлении.
Prompt
Создайте страницу с div, содержащим несколько абзацев текста, разделённым на 3 колонки с помощью column-count. Используйте сокращённое свойство column-rule, установленное в значение "1px solid lightblue", чтобы оформить вертикальную линию между колонками.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-rule shorthand</title>
<style>
div {
column-count: 3;
column-rule: 1px solid lightblue;
}
</style>
</head>
<body>
<h1>CSS column-rule shorthand</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus. Nulla vitae sem nec diam vehicula fringilla.</p>
</div>
</body>
</html>
Растяжение колонок CSS
Свойство column-span задаёт, на сколько колонок должен растягиваться элемент. Часто используется для заголовков.
Пример
Сделайте так, чтобы элемент <h2> растягивался на все колонки, и отцентрируйте его.
Prompt
Создайте страницу с div, разделённым на 3 колонки и содержащим абзацы текста. Добавьте внутри div заголовок h2 со свойствами column-span: all и text-align: center, чтобы заголовок растягивался на все колонки.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-span</title>
<style>
div {
column-count: 3;
}
h2 {
column-span: all;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS column-span</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<h2>A Heading That Spans All Columns</h2>
<p>Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</p>
<p>Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus.</p>
</div>
</body>
</html>
Ширина колонок CSS
Свойство column-width задаёт рекомендуемую оптимальную ширину для каждой колонки. Браузер решает, сколько колонок создать, исходя из этой ширины и доступного пространства.
Пример
Задайте рекомендуемую оптимальную ширину колонки в 100px и позвольте браузеру определить количество колонок.
Prompt
Создайте страницу с div, содержащим несколько абзацев текста. Используйте column-width: 100px, чтобы позволить браузеру определить количество колонок на основе рекомендуемой оптимальной ширины и доступного пространства.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-width</title>
<style>
div {
column-width: 100px;
}
</style>
</head>
<body>
<h1>CSS column-width</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus. Nulla vitae sem nec diam vehicula fringilla.</p>
</div>
</body>
</html>