css властивість column-rule-width
Властивість column-rule-width у багатоколонковому тексті задає товщину ліній між колонками.
Властивість column-rule відображається як певна межа, яка з'являється між стовпцями на макеті з декількома стовпцями.
Властивість column-rule-width слід використовувати разом із властивостями column-rule-style, інакше використання цієї властивості не буде мати ефекту (через відсутність значення "стиль").
Значення:
Три змінні - thin (2 пікселя), medium (4 пікселя) і thick (6 пікселів) задають товщину лінії. Для більш точного значення товщину можна вказувати в пікселях або інших одиницях.
- Порада
-
Ви можете використовувати універсальну властивість
автор: Svitlanacolumn-rule, щоб встановити ширину, стиль і колір стовпчика в одному місці. - Порада
-
Специфікація не визначає чітко товщину кожного з ключових слів (
автор: Svitlanathin, medium, thick). Проте вимагає, щоб вони розташовувалися один за одним:thin ≤ medium ≤ thick, та мали постійне значення в межах одного документу.
Синтаксис
column-rule-width: medium|thin|thick|length|initial|inherit;Властивість column-rule-width може отримувати 6 значень:
-
medium -
Звичайна лінія (4 пікселя). Без задання.
автор: Svitlana -
thin -
Тонка лінія (2 пікселя)
автор: Svitlana -
thick -
Товста лінія (6 пікселей)
автор: Svitlana -
length -
Товщина лінії в пікселях або інших одиницях.
автор: Svitlana -
initial -
Встановлює цю властивість в значення без задання
автор: Svitlana -
inherit -
Успадкує значення властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | medium |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.columnRuleWidth="10px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 50 | 52 | 9 | 11.1 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 50 | 50 | 52 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
Товщина розділювача: зверху тонка лінія в 1px, знизу — та сама, але 8px.
HTML
<div class="cols thin">Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>
<div class="cols thick">Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>CSS
.cols {
column-count: 3;
column-rule-style: solid;
margin-bottom: 12px;
}
.thin { column-rule-width: 1px; }
.thick { column-rule-width: 8px; }Динамічний приклад зі значенням у вигляді числа
Приклад використання
Коментарі
Коментарів ще немає — будьте першим!