CSS :: Свойство column-fill
okmysite.com
HTML и CSS для начинающих

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

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

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

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

Синтаксис

column-fill: auto | balance | balance-all

Значения

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

Ссылки

Примеры

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