CSS свойство column-widthcss3

CSS свойства

Определение и применение

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

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
column-width50.0
4.0
-webkit-
2.0
-moz-
37.0*
15.0
-webkit-
9.0
3.1
-webkit-
10.012.0

CSS синтаксис:

column-width:"auto | length | initial | inherit";

JavaScript синтаксис:

object.style.columnWidth = "200px"

Значения свойства

ЗначениеОписание
autoУказывает, что ширина колонок должна быть определена браузером автоматически на основании значений других свойств, например, таких свойств как column-countcss3(задает количество колонок). Это значение по умолчанию.
lengthЗначение указывает оптимальную ширину колонки. Ширина колонки может быть шире при наличии свободного места, или уже в случае если указанное значение больше возможной ширины колонки. Значение ширины указывается в единицах измерения длины CSS (px, mm, pt, и т.п.). Значение должно быть строго положительным. Обращаю Ваше внимание, что в настоящее время значения указанные в процентах не допускаются.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства column-width</title>
<style>
.container {
-webkit-column-width: 200px;  /* для поддержки ранних версий браузеров */
-moz-column-width: 200px;  /* для поддержки ранних версий браузеров */
column-width: 200px;  /* задаем оптимальную ширину для колонок */
}
</style>
</head>
	<body>
		<div class = "container">
			Этот гигантский грызун представляет собой жирного зверька с продолговатым телом,
			покрытым жёсткой лохматой шерстью пёстрой коричневой расцветки. Передние лапы у капибары длиннее задних,
			массивный огузок не имеет хвоста, и поэтому у неё всегда такой вид, будто она вот-вот собирается сесть.
			У неё крупные лапы с широкими перепончатыми пальцами, а когти на передних лапах, короткие и тупые, удивительно напоминают миниатюрные копыта.
			Вид у неё весьма аристократический: её плоская широкая голова и тупая, почти квадратная морда имеют благодушно-покровительственное выражение,
			придающее ей сходство с задумчивым львом. По земле капибара передвигается характерной шаркающей походкой или скачет вразвалку галопом,
			в воде же плавает и ныряет с поразительной лёгкостью и проворством.
			Капибара — флегматичный добродушный вегетарианец, лишённый ярких индивидуальных черт, присущих некоторым его сородичам,
			но этот недостаток восполняется у неё спокойным и дружелюбным нравом.
		</div>
	</body>
</html>
Пример использования свойства column-width(задает оптимальную ширину для колонок).
Пример использования свойства column-width(задает оптимальную ширину для колонок).
CSS свойства