css властивість column-span
Властивість column-span визначає, як повинен відображатися елемент в багатоколонковому тексті - займати ширину всіх колонок або тільки одну з них.
Цю властивість зазвичай застосовують для заголовків тексту або зображень, які не повинні розбиватися на колонки.
Елемент, який охоплює декілька стовпчиків, називається "елемент, що охоплює".
автор: Svitlana
Синтаксис
column-span: none|all|initial|inherit;Властивість column-span може отримувати 4 значень:
-
none -
Елемент займає ширину однієї колонки. Без задання
автор: Svitlana -
all -
Елемент займає все колонки.
автор: Svitlana -
initial -
Встановлює цю властивість в значення без задання
автор: Svitlana -
inherit -
Успадкує значення властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.columnSpan="all" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 50 | 71 | 9 | 37 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 50 | 50 | 79 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
Заголовок із column-span: all розтягується через усі колонки, розриваючи потік: текст до нього — у колонках, і після нього — знову в колонках.
HTML
<div class="cols">
<p>Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</p>
<h2>Заголовок через усі колонки</h2>
<p>Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</p>
</div>CSS
.cols {
column-count: 3;
}
h2 {
column-span: all;
background: #eef6ff;
}Значення у дії
Приклад використання
Коментарі
Коментарів ще немає — будьте першим!