column-width | Справочник CSS
http://belarusweb.net
Основы создания сайтов

column-width

Описание

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

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

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

Синтаксис

column-width: <ширина> | auto

Значения

  • auto – браузер будет устанавливать ширину колонок автоматически.
  • ширина – любые доступные в CSS единицы измерения (смотреть). Отрицательные значения и проценты не допускаются.

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

Ссылки

Примеры

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

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

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

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

	</style>
	
</head>
<body>

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

Пример №1