column-span

Baseline Широкодоступный

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2020 года.

Свойство column-span CSS позволяет элементу занимать все колонки, если его значение установлено в all.

Попробовать

Элемент, занимающий более одной колонки, называется элементом раздела.

Синтаксис

/* Keyword values */
column-span: none;
column-span: all;

/* Global values */
column-span: inherit;
column-span: initial;
column-span: revert;
column-span: revert-layer;
column-span: unset;

Свойство column-span задается одним из ключевых значений, перечисленных ниже.

Значения

none: Элемент не занимает несколько колонок.
all: Элемент занимает все колонки. Контент в обычном потоке, который появляется до элемента, автоматически распределяется по всем колонкам перед появлением элемента. Элемент устанавливает новый контекст форматирования блоков.

Формальное определение

Начальное значение	`none`
Применимо к	элементы блочного типа в потоке
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

Формальный синтаксис

column-span = 
  none  |
  all

Примеры

Заголовок, занимающий все колонки

В этом примере заголовок занимает все колонки статьи.

HTML

<article>
  <h2>Header spanning all of the columns</h2>
  <p>
    The h2 should span all the columns. The rest of the text should be
    distributed among the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
</article>

CSS

article {
  columns: 3;
}

h2 {
  column-span: all;
}

Результат

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

Спецификация
CSS Multi-column Layout Module Level 1 # column-span

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`column-span`	506	1212	71	3715	95.1	5018	79	3714	95	5.01.0	504.4
`all`	6	12	71	15	5.1	18	79	14	5	1.0	4.4
`none`	6	12	71	15	5.1	18	79	14	5	1.0	4.4

См. также

© 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/column-span