html.okpython.net
HTML и CSS для начинающих

CSS :: Свойство column-span

css-свойство column-span (от англ. column spanохват колонок) определяет, должен ли элемент занимать ширину (пересекать) все колонки многоколоночного родительского элемента или же располагаться только в одной из них. Это может потребоваться, например, для заголовков статей, которые должны идти по центру пересекая все колонки.

На данный момент свойство хорошо поддерживается браузером Opera, а Safari, Chrome и Аndroid поддерживают его через префикс в виде -webkit-column-span. Браузер Firefox на данный момент свойство не поддерживает.

Характеристики

  • Значение по умолчанию: none.
  • Применяется: к блочным элементам (за исключением таблиц), а также ячейкам и к элементам, у которых значение свойства display установлено в inline-block.
  • Наследуется: нет.
  • Анимируется: нет.
  • JavaScript: object.style.columnSpan="value".

Синтаксис

column-span: none | all

Значения

  • none – элемент будет занимать ширину всего одной колонки наравне с обычным текстом.
  • all – элемент будет занимать ширину всех колонок.

Ссылки

Примеры

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		article{
		width: 400px;
		margin: 0.7em;
		padding: 0.5em;
		border: 1px solid grey;
		column-count: 2;
		}
		
		article h1, article h2{
		text-align: center;
		column-span: all;
		-webkit-column-span: all;
		}
		
		article h2{
		font-size: 1.3em;
		}
		
		article p{
		margin: 0px;
		padding: 0px;
		}

	</style>
	
</head>
<body>

	<article>
		
		<h1>Заголовок 1-го уровня</h1>
		
		<h2>Заголовок 2-го уровня</h2>	
		
		<p>
			Текст текст текст текст текст текст текст 
			текст текст текст текст текст текст текст
			текст текст текст текст текст текст текст
			текст текст текст текст текст текст текст
			текст текст текст текст текст текст текст
			текст текст текст текст текст текст текст
			текст текст текст текст текст текст текст
			текст текст текст текст текст текст текст
			текст текст текст текст текст текст текст
			текст текст текст текст текст текст текст		
		</p> 

		<h2>Заголовок 2-го уровня</h2>
	 
		<p>
			Текст текст текст текст текст текст текст 
			текст текст текст текст текст текст текст
			текст текст текст текст текст текст текст
			текст текст текст текст текст текст текст
			текст текст текст текст текст текст текст
			текст текст текст текст текст текст текст
			текст текст текст текст текст текст текст
			текст текст текст текст текст текст текст
			текст текст текст текст текст текст текст
			текст текст текст текст текст текст текст
		</p>
		
	</article>
	
 </body>
</html>		

Пример №1