CSS :: Свойство columns
http://belarusweb.net
Основы создания сайтов

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

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

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

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

Синтаксис

columns: column-width || column-count

Значения

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

Ссылки

Примеры

HTML Результат BwCodes
<!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