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

CSS :: Свойство columns

Сокращенное css-свойство columns (от англ. columnsколонки) позволяет одновременно задавать как ширину, так и количество колонок многоколоночного текста.

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

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

Синтаксис

columns: column-width || column-count

Значения

Можно указывать через пробел значения свойств column-width и column-count задавая тем самым ширину и количество колонок в одном месте. При этом значения могут быть указаны в любом порядке. Если какое-то из значений указано не будет, браузер использует для него соответствующее значение по умолчанию.

Ссылки

Примеры

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

	<style>
		
		p{
		width: 400px;
		margin: 2em;
		padding: 0.7em;
		border: 1px solid green;
		}
		
		/* Разбиваем на две колонки по 150px */
		.p_1{
		columns: 150px 2;
		}

		/* Может вместиться только 2 колонки по 150px */		
		.p_2{
		columns: 150px 3;
		}

		/* Может вместиться 7 колонок, но задано только 3, */
		/* поэтому column-width просто игнорируется */		
		.p_3{
		columns: 50px 3;
		}		

		/* Вместится 4 колонки по 80px */
		.p_4{
		columns: 80px;
		}

		/* Просто делим на 4 колонки */
		.p_5{
		columns: 4;
		}

	</style>
	
</head>
<body>

	<p class="p_1">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
	</p> 
 
	<p  class="p_2">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
	</p>
 
	<p  class="p_3">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
	</p>	
 
	<p  class="p_4">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
	</p>
 
	<p  class="p_5">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
	</p>
	
 </body>
</html>		

Пример №1