CSS свойство column-spancss3

CSS свойства

Определение и применение

CSS свойство column-span определяет, должен ли элемент пересекать все колонки, либо позиционируется в одной из них.

Схематичное отображение работы свойства column-span представлено на следующем изображении:

Схематичное отображение работы CSS свойства column-span

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
column-spancss350.0
4.0
-webkit-
Нет37.0*
15.0
-webkit-
9.0
3.1
-webkit-
10.012.0

CSS синтаксис:

column-span:"none | all | initial | inherit";

JavaScript синтаксис:

object.style.columnSpan = "all"

Значения свойства

ЗначениеОписание
noneЭлемент находится в одной колонке. Это значение по умолчанию.
allЭлемент проходит через все колонки (пересекает все колонки).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства column-span</title>
<style>
.container {
-webkit-columns: 3;  /* для поддержки ранних версий браузеров */
-moz-columns: 3;  /* для поддержки ранних версий браузеров */
columns: 3;  /* указываем количество колонок на которое необходимо разбить элемент */
}
.noneSpan {
-webkit-column-span: none;  /* для поддержки ранних версий браузеров */
-moz-column-span: none;  /* для поддержки ранних версий браузеров */
column-span: none;  /* указываем, что элемент находится в одной колонке (значение по умолчанию) */
color: rgb(213,79,54);  /* устанавливаем цвет шрифта */
font: 30px arial;  /* устанавливаем размер и семейство шрифта */
}
.across {
-webkit-column-span: all;   /* для поддержки ранних версий браузеров */
-moz-column-span: all;  /* для поддержки ранних версий браузеров */
column-span: all;  /* указываем, что элемент проходит через все колонки (пересекает все колонки)*/
background: lightgray;  /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "container">
			<h2 class = "noneSpan">Снегирь</h2>
			Птица мелких размеров, чуть больше воробья. Голова сверху, вокруг клюва и глаз — чёрная.
			Маховые и рулевые перья тоже чёрные, с синим металлическим отливом. Поясница и подхвостье — белые.
			Спина, плечи и зашеек у самца серые. Щёки, шея снизу, брюхо и бока — красные.
			Тон и интенсивность окраски нижней стороны тела зависит от подвидовой принадлежности и индивидуальных особенностей.
			Зашеек и плечи самки серые. Спина буровато-коричневая. Щёки, шея снизу, живот и бока — серо-коричневые.
			<h2 class = "across">Питание</h2>
			Питается снегирь семенами, почками, некоторыми паукообразными и ягодами (в частности, рябиной).
			Кормясь ягодами, выедает из них семена, оставляя мякоть. 
		</div>
	</body>
</html>
Пример использования свойства column-span(определяет, должен ли элемент пересекать все колонки, либо позиционируется в одной из них).
Пример использования свойства column-span(определяет, должен ли элемент пересекать все колонки, либо позиционируется в одной из них).
CSS свойства