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

column-fill

Описание

css-свойство column-fill (от англ. column fillзаполнение колонок) управляет распределением содержимого между колонками в многоколоночном элементе.

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

  • Значение по умолчанию: balance.
  • Применяется: к многоколоночным элементам.
  • Наследуется: нет.
  • Анимируется: нет.
  • JavaScript: object.style.columnFill="value".

Синтаксис

column-fill: auto | balance | balance-all

Значения

  • auto – браузер заполняет колонки последовательно одна за другой.
  • balance – браузер будет распределять содержимое равномерно между всеми колонками, в результате чего они будут иметь одинаковую высоту. При печати данное значение будет использовано только для последней страницы.
  • balance-all – браузер будет распределять содержимое равномерно между всеми колонками, в результате чего они будут иметь одинаковую высоту. При печати данное значение будет использовано для всех страниц.

Ссылки

Примеры

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

	<style>
		
		p{
		width: 400px;
		height: 300px;
		margin: 1em;
		padding: 0.7em;
		border: 1px solid green;
		column-count: 3;		
		}
		
		.p_1{column-fill: auto;}
		
		.p_2{column-fill: balance;}

	</style>
	
</head>
<body>

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

Пример №1