Column count: column-count | htmlbook.ru

Содержание

column-count | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
10.01.0+11.1+3.0+1.5+2.0+

Краткая информация

Значение по умолчанию auto
НаследуетсяНет
ПрименяетсяК блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block
Процентная записьНеприменима
Ссылка на спецификацию http://www.w3.org/TR/css3-multicol/#column-count

Версии CSS

Описание

Определяет количество колонок в многоколоночном тексте.

Синтаксис

column-count: <число> | auto

Значения

<число>
Целое число больше нуля, задающее оптимальное число колонок.
auto
Число колонок вычисляется автоматически на основе других свойств (column-width, column-gap).

Пример

HTML5CSS3IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>column-count</title>
  <style>
   .book {
    -moz-column-count: 2; /* Для Firefox */
    -webkit-column-count: 2; /* Для Safari и Chrome */
    column-count: 2;
   }
  </style>
 </head>
 <body>
  <div>
   Контрапункт контрастных фактур дает структурный midi-контроллер, 
   таким образом объектом имитации является число длительностей в 
   каждой из относительно автономных ритмогрупп ведущего голоса. 
   Протяженность, по определению, просветляет флэнжер, хотя это 
   довольно часто напоминает песни Джима Моррисона и Патти Смит.
  </div>
 </body>
</html>

Браузеры

Firefox поддерживает нестандартное свойство -moz-column-count.

Safari, Chrome и iOS поддерживают нестандартное свойство -webkit-column-count.

count | HTML и CSS с примерами кода

Свойство column-count определяет количество колонок в многоколоночном тексте.

Колонки и таблицы

Синтаксис

/* <integer> value */
column-count: 3;

/* Keyword value */
column-count: auto;

/* Global values */
column-count: inherit;
column-count: initial;
column-count: unset;

Значения

<число>
Целое число больше нуля, задающее оптимальное число колонок.
auto
Число колонок вычисляется автоматически на основе других свойств (column-width, column-gap).

Примечание

Firefox поддерживает свойство -moz-column-count.

Safari, Chrome и Аndroid поддерживают свойство -webkit-column-count.

Значение по-умолчанию:

Применяется к блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block

Спецификации

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

Can I Use multicolumn? Data on support for the multicolumn feature across the major browsers from caniuse.

com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>column-count</title>
    <style>
      .book {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
      }
    </style>
  </head>
  <body>
    <div>
      Контрапункт контрастных фактур дает структурный
      midi-контроллер, таким образом объектом имитации
      является число длительностей в каждой из относительно
      автономных ритмогрупп ведущего голоса. Протяженность,
      по определению, просветляет флэнжер, хотя это довольно
      часто напоминает песни Джима Моррисона и Патти Смит.
    </div>
  </body>
</html>

Свойство column-count - количество колонок в многоколоночном тексте

Свойство column-count задает рекомендуемое количество колонок в многоколоночном тексте.

Их реальное количество может отличаться от заданного, в зависимости от ширины колонки и размера промежутка между ними.

Синтаксис

селектор { column-count: число | auto; }

Значения

Значение Описание
число Задает указанное количество колонок. Точнее, рекомендует браузеру использовать это количество колонок, так как их реальное количество может отличаться от заданного, в зависимости от ширины колонки и размера промежутка между ними.
auto Браузер сам подбирает оптимальное количество колонок.

Значение по умолчанию: auto.

Пример

В данном примере текст разобьется на 3 колонки (конечно же, в браузерах, которые поддерживают многоколоночность, в остальных будет просто обычный текст в одну колонку):

<div> некий длинный текст </div> #elem { column-count: 3; text-align: justify; }

:

Пример .

Значение auto

В данном примере указана ширина колонки column-width в 150px, а их количество column-count стоит в значении auto - браузер сам подберет необходимое количество колонок и промежуток между ними:

<div> некий длинный текст </div> #elem { column-count: auto; column-width: 150px; text-align: justify; }

:

Смотрите также

  • свойство column-width,
    которое задает ширину колонки
  • свойство column-gap,
    которое задает промежуток между колонками
  • свойство column-rule,
    которое задает границу между колонками
  • свойство column-span,
    которое задает количество столбцов, на которые должен растягиваться элемент
  • свойство columns,
    которое является свойством-сокращением для многоколоночности

column-count | CSS справочник

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

Описание

CSS свойство column-count определяет количество колонок, на которое следует разделить элемент.

Значение по умолчанию: auto
Применяется: к незамещаемым блочным или табличным элементам, к ячейкам таблицы или inline-block элементам
Анимируется: да
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.columnCount=3

Синтаксис

column-count: число|auto|inherit;

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

Значение Описание
число Оптимальное количество колонок, по которым будет распределено содержимое элемента.
auto Количество колонок будет определено другими свойствами, такими как, например, "column-width".
inherit Указывает, что значение наследуется от родительского элемента.

Пример

Стандарт CSS3 еще не принят, но многие полезные свойства уже поддерживаются большинством браузеров. Из новых свойств стоит прежде всего обратить внимание на box-shadow и text-shadow, который позволяют добавлять различные по виду и расположению тени, как к тексту, так и к элементам, например можно сделать меню, отбрасывающую легкую тень, для придания объемного вида. Еще одно из свойств предназначено для работы с текстом - column, он позволяет делить текст на колонки, задавать ширину для них, управлять расстоянием между колонками и выбирать стиль, ширину и цвет для границ между ними.

div {
column-count: 1;
}

CSS свойство column-count | назначение, допустимые значения, примеры

Свойство column-count

определяет количество колонок в многоколоночном элементе.

Допустимые значения

  • auto — количество колонок определяется браузером в зависимости от остальных свойств (например в зависимости от ширины колонок)
  • — количество колонок в многоколоночном элементе
Значение по умолчанию auto
Применимо к блочным элементам (кроме табличных ) к ячейкам таблицы и элементам уровня inline-block
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами

Пример

body {
column-count:5;
}

Твой код:
<html> <head> <title></title> <style type="text/css"> <!-- div { column-count:2; width:300px; border:1px solid #000; } --> </style> </head> <body> <p>На момент выхода статьи в прямом виде это свойство не поддерживается ни одним из распространенных браузеров</p> <div>этот блок состоит из двух колонок этот блок состоит из двух колонок этот блок состоит из двух колонок этот блок состоит из двух колонок этот блок состоит из двух колонок этот блок состоит из двух колонок этот блок состоит из двух колонок этот блок состоит из двух колонок этот блок состоит из двух колонок</div> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

Это свойство относится к CSS3 модулю CSS Multi-column Layout Module — кандидата в рекомендацию W3C с 17 декабря 2009 года.

Safari 3 и выше и Chrome 1 и выше поддерживают аналогичное свойство -webkit-column-count, а Firefox 1.5 и выше -moz-column-count. Эти свойства применимы только к блочным элементам.

Свойство column-gap

column-count | Справочник CSS | schoolsw3.com


Пример

Разделить текст в элементе <div> на три столбца:

div {

  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
}

Редактор кода »

Определение и использование

Свойство column-count указывает количество столбцов, которые должны содержать элемент и быть разделены.


Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа, за которыми следует -webkit- или -moz- указывают первую версию, которая работала с префиксом.

Свойство
column-count 50. 0
4.0 -webkit-
10.0 52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1


CSS Синтаксис

column-count: number|auto|initial|inherit;

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

Значение Описание Воспроизвести
number Оптимальное количество столбцов, в которые будет записано содержимое элемента Воспроизвести »
auto Значение по умолчанию. Количество столбцов будет определяться другими свойствами, например "column-width" Воспроизвести »
initial Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial Воспроизвести »
inherit Наследует это свойство от родительского элемента. Прочитайте о inherit

Примеры

Пример

Указать расстояние между столбцами в 40 пикселей:

div {
  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
  -moz-column-gap: 40px; /* Firefox */
  column-gap: 40px;
}

Редактор кода »

Пример

Указать ширину, стиль и цвет правила между столбцами:

div {
  -webkit-column-rule: 4px double #ff00ff; /* Chrome, Safari, Opera */
  -moz-column-rule: 4px double #ff00ff; /* Firefox */
  column-rule: 4px double #ff00ff;
}

Редактор кода »

Связанные страницы

CSS Учебник: CSS Несколько столбцов

HTML DOM Справочник: Свойство columnCount


Свойство columns | CSS справочник

CSS свойства

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

CSS свойство columns позволяет указать в одном объявлении значения свойств column-width(оптимальная ширина колонок) и column-count(оптимальное количество колонок).

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

CSS синтаксис:

columns:"auto | column-width column-count | initial | inherit";


Если значение указано как целое число, то оно относится к значению свойства column-count,
если указано в единицах измерения длины CSS (px, mm, pt, и т.п.), то к column-width.

Допускается указывать как одно, так и два значения в одном объявлении.

columns:"auto" /* column-width: auto; column-count: auto */
columns:"auto auto" /* column-width: auto; column-count: auto */

JavaScript синтаксис:

object.style.columns = "auto auto"

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

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

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

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

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

CSS свойство подсчета столбцов


Пример

Разделите текст в элементе

на три столбца:

div {
количество столбцов: 3;
}

Попробуй сам "

Дополнительные примеры "Попробуйте сами" ниже.


Определение и использование

Свойство column-count определяет количество столбцов, которые должен содержать элемент. быть разделенным на.


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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.

Объект
кол-во столбцов 50,0
4,0 -webkit-
10,0 52,0
2,0 -моз-
9,0
3,1 -webkit-
37,0
15,0 -webkit
11. 1


Синтаксис CSS

количество столбцов: номер | авто | начальный | наследование;

Стоимость недвижимости

Значение Описание Играй
номер Оптимальное количество столбцов, в которые будет перетекать содержимое элемента Играй »
авто Значение по умолчанию.Количество столбцов будет определяться другими свойствами, например, "ширина столбца" Играй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать примерно начальные Играй »
унаследовать Наследует это свойство от своего родительского элемента. Читать про наследство

Другие примеры

Пример

Укажите зазор в 40 пикселей между столбцами:

div {
колонка-пробел: 40 пикселей;
}

Попробуй сам "

Пример

Укажите ширину, стиль и цвет линейки между столбцами:

div {
столбец-линейка: 4px double # ff00ff;
}

Попробуй сам "

Связанные страницы

Учебное пособие по CSS: несколько столбцов в CSS

Ссылка на HTML DOM: свойство columnCount



CSS свойство заполнения столбца


Пример

Укажите способ заполнения столбцов:

. газета1 {
заполнение столбца: авто;
}

.newspaper2 {
заполнение колонки: баланс;
}

Попробуй сам "

Дополнительные примеры "Попробуйте сами" ниже.


Определение и использование

Свойство column-fill определяет, как заполнять столбцы, сбалансированно или нет.

Совет: Если вы добавите высоту к элементу с несколькими столбцами, вы можете контролировать, как содержимое заполняет столбцы. Контент может быть сбалансированным или заполненным последовательно.

Значение по умолчанию: баланс
Унаследовано: нет
Анимируемое: нет. Прочитать о анимированных
Версия: CSS3
Синтаксис JavaScript: объект .style.columnFill = "auto" Попробуйте

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следует -moz-, указывают первую версию, которая работала с префиксом.

Объект
колонка-заполнитель 50,0 10,0 52,0
13,0 -моз-
10,0
7,0 -webkit-
37,0


Синтаксис CSS

заполнение столбца: баланс | авто | начальный | наследование;

Стоимость недвижимости

Значение Описание
остаток Значение по умолчанию.Заполняет каждый столбец примерно одинаковым количеством контента, но не позволит столбцам быть выше, чем высота (так, столбцы может быть короче высоты, так как браузер распределяет контент равномерно по горизонтали)
авто Заполняет каждый столбец до тех пор, пока он не достигнет высоты, и так, пока он не запустится вне содержимого (поэтому это значение не обязательно заполнит все столбцы или заполняйте их равномерно)
начальный Устанавливает для этого свойства значение по умолчанию. Читать примерно начальные
унаследовать Наследует это свойство от своего родительского элемента. Читать про наследство

Другие примеры

Пример

Разделите текст в элементе

на три столбца:

div {
количество столбцов: 3;
}

Попробуй сам "

Пример

Укажите зазор в 40 пикселей между столбцами:

div {
колонка-пробел: 40 пикселей;
}

Попробуй сам "

Пример

Укажите ширину, стиль и цвет линейки между столбцами:

div {
столбец-линейка: 4px double # ff00ff;
}

Попробуй сам "

Связанные страницы

Учебное пособие по CSS: несколько столбцов в CSS

Ссылка на HTML DOM: свойство columnFill



столбцов | CSS-уловки

С помощью всего нескольких правил CSS вы можете создать макет, вдохновленный печатью, который обладает гибкостью в Интернете. Это как взять газету, но по мере того, как бумага становится меньше, столбцы автоматически корректируются и балансируются, позволяя контенту течь естественным образом.

  .intro {
  столбцы: 300 пикселей 2;
}  

Свойство columns будет принимать column-count , column-width или оба свойства.

  столбцов: || ;  

Для создания гибкого многоколоночного макета рекомендуется использовать как количество столбцов , так и ширину столбца . счетчик столбцов будет действовать как максимальное количество столбцов, в то время как ширина столбца будет определять минимальную ширину для каждого столбца. Собирая эти свойства вместе, многоколоночный макет автоматически разбивается на один столбец при узкой ширине браузера без необходимости использования медиа-запросов или других правил.

Многоколоночный макет отлично работает с блочными элементами, включая списки, для создания гибкой навигации.

Для дальнейшей точной настройки многоколоночного макета используйте внутри для определенных элементов, чтобы они не застревали между столбцами.

Похожие объекты

Дополнительная информация

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

IE Edge Firefox Chrome Safari Opera
10+ Все 9+ 50+ Все 11,5+
Android Chrome Android Firefox Браузер Android iOS Safari Opera Mobile
Все Все Все Все Все

колонка-заполнение | CSS-уловки

При добавлении высоты к элементу с несколькими столбцами вы можете управлять тем, как содержимое заполняет столбцы. Контент может быть сбалансирован или заполнен последовательно.

  ul {
  высота: 300 пикселей;
  -webkit-columns: 3;
     -моз-столбцов: 3;
          столбцы: 3;
  -moz-column-fill: баланс;
       заполнение столбца: баланс;
}  

Это свойство доступно только в Firefox. Firefox автоматически сбалансирует контент в многоколоночном макете с ограниченной высотой. Другие браузеры всегда будут заполнять столбцы последовательно, если задано ограничение по высоте.

Чтобы Firefox вел себя как другие браузеры, то есть последовательно заполнял столбцы, вы можете установить column-fill: auto .

Значения

column-fill принимает значения ключевого слова balance и auto .

balance заполнит каждый столбец примерно одинаковым объемом содержимого, но не позволит столбцам вырасти выше, чем высота . Вы можете обнаружить, что столбцы будут короче, чем высота , поскольку браузер распределяет контент равномерно по горизонтали.

auto будет заполнять каждый столбец до тех пор, пока он не достигнет высоты , и делать это до тех пор, пока в нем не закончится содержимое.Учитывая содержимое, это значение не обязательно будет заполнять все столбцы или заполнять их равномерно.

Это все равно что наливать сок в стаканы. Вы можете налить равное количество сока в каждый стакан и обнаружить, что вы не налили каждый стакан до верха ( остаток ). Как вариант, вы можете наполнить стакан доверху, пока он не станет полным, и повторять это, пока не останется сока. В результате в оставшихся стаканах может быть меньше сока или вообще не будет ( авто ).

См. Пример заполнения столбца пером [CSS-Tricks] от CSS-Tricks (@ css-tricks) на CodePen.

Сопутствующие объекты

Дополнительные ресурсы

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

Значения ключевого слова для заполнения столбца специально работают в Firefox. Они не работали в августе 2014 года, когда изначально была написана эта запись в Альманахе, но работают при повторном тестировании в августе 2015 года (Chrome 44). Во время этого тестирования выяснилось, что динамическое изменение значения не помогло, вам пришлось принудительно выполнить ретрансляцию.

Браузер поддерживает макет с несколькими столбцами в целом:

хром Safari Firefox Opera IE Android iOS
Любая 3+ 1.5+ 11.1+ 10+ 2.3+ 6.1+

Не забывайте свои префиксы!

столбцов · Документы WebPlatform

Сводка

Задает количество столбцов, на которые должен быть разделен элемент.

Обзорная таблица

Начальное значение
авто
Относится к
незамещенных элементов уровня блока (кроме элементов таблицы), ячеек таблицы и элементов встроенного блока
Унаследовано
Нет
Медиа
визуальный
Расчетное значение
как указано
Анимационный
Да
Свойство объектной модели CSS
Колонка
В процентах
НЕТ

Синтаксис

  • количество столбцов: авто
  • количество столбцов: количество

Значения

кол-во
Целочисленное значение, указывающее количество столбцов в элементе с несколькими столбцами.Значения должны быть больше 0. Когда ширина column-width указана с **** column-count **** и оба имеют неавтоматические значения, целочисленное значение определяет максимальное количество столбцов.
авто
Число столбцов определяется значениями других значений свойств элемента с несколькими столбцами, например ширина столбца .

Примеры

В этом примере показано, как отобразить текст в элементе section.newspaper в трех столбцах.

  #columns {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  количество столбцов: 3;
}
  

Посмотреть живой пример

Использование auto для подсчета столбцов позволит создать столько столбцов, сколько необходимо или может быть создано.

 
div {
количество столбцов: авто;
ширина столбца: 100 пикселей;
}
  

Банкноты

Замечания

Фактическое количество столбцов может отличаться от указанного значения из-за доступного места. Чтобы гарантировать использование указанного значения, должны быть указаны все значения свойств длины элемента с несколькими столбцами.

Синтаксис

количество столбцов: количество | авто

Связанные спецификации

Модуль макета с несколькими столбцами CSS
W3C кандидат в рекомендации

См. Также

Статьи по теме

Многоколонный
Адаптивный веб-дизайн

Связанные страницы

Атрибуты

CSS | свойство column-count - GeeksforGeeks

< html >

< head >

5

5 > количество столбцов свойство название >

< стиль >

.gfg {

-webkit-column-count: 2;

-моз-столбцов-кол-во: 2;

количество столбцов: 2;

-webkit-column-rule: двойной зеленый цвет 10 пикселей;

-moz-column-rule: 10px двойной зеленый;

линейка-столбец: двойной зеленый 10 пикселей;

выравнивание текста: выравнивание;

}

h2 {

цвет: зеленый;

}

h2, h3 {

выравнивание текста: по центру;

}

стиль >

головка >

< корпус > 9000

< h2 >

GeeksforGeeks

h2 >

Пример количества столбцов Свойство

h3 >

< div class = "gfg" >

Курс предназначен также для студентов

как работающих профессионалов для подготовки к собеседованию по кодированию

.Этот курс предназначен для

, есть вопросы кодирования от уровня школы до уровня

, необходимого для продуктовых компаний

, таких как Amazon, Microsoft, Adobe и т. Д.

div >

корпус >

html >

CSS Multi-column Layout Module Level 1

1 .Введение

(Этот раздел не является нормативным.)

Этот модуль описывает многоколоночный макет в CSS. Используя функции, описанные в этом документе, таблицы стилей могут объявить, что содержимое элемента должен быть размещен в нескольких столбцах.

Другие методы компоновки в CSS, при применении к родительскому элементу, изменить свойства отображения прямых потомков. Например, если создается трехколоночная сетка, прямые дочерние элементы контейнера сетки становятся элементами сетки и помещаются в дорожки столбцов, по одному элементу на ячейку с дополнительными строками, создаваемыми по мере необходимости.

Дочерние элементы контейнера с несколькими столбцами продолжают работать в обычном режиме, этот поток разбит на несколько столбцов. Эти столбцы имеют гибкий встроенный размер, и, следовательно, реагировать на доступное пространство изменяя размер или количество отображаемых столбцов.

Макеты с несколькими столбцами легко описать в CSS. Вот простой пример:

 body {column-width: 12em} 

В этом примере элемент body должен иметь столбцы шириной не менее 12em.Точное количество столбцы будут зависеть от доступного места.

Количество столбцов также может быть явно установлено в таблице стилей:

 body {column-count: 2} 

В этом случае количество столбцов фиксировано а ширина столбца будет варьироваться в зависимости от доступной ширины.

Свойство сокращенных столбцов можно использовать для установки: или оба свойства в одном объявлении.

В этих примерах количество столбцов, ширина столбцов и и число, и ширина устанавливаются соответственно:
 body {columns: 2}
тело {columns: 12em}
тело {columns: 212em} 

Другая группа свойств, представленных в этом модуле, описывает промежутки и правила между столбцами.

 body {column-gap: 1em; column-rule: тонкий сплошной черный;} 

Первое объявление в приведенном выше примере устанавливает пробел между двумя соседними столбцами должно быть 1em. Промежутки столбцов аналогичны областям заполнения. В середине промежутка будет правило который описывается свойством column-rule.

Значения свойства column-rule аналогичны значениям свойств границы CSS. Как и граница, правило столбца - это сокращенное свойство.

В этом примере сокращенное объявление правила столбца из приведенный выше пример был расширен:
 body {пробел-столбца: 1em; ширина-правила-столбца: тонкий; стиль-правила-столбца: сплошной; цвет правила-столбца: черный;} 

Свойства column-fill и column-span предоставить таблицам стилей более широкий диапазон визуальных выражений в многоколоночных макетах.

В этом примере столбцы настроены на балансировку, т.е. иметь примерно одинаковую длину. Кроме того, элементы h3 должны охватывать все столбцы.
 div {column-fill: balance}
h3 {диапазон-столбцов: все} 

Эта спецификация вводит десять новых свойств, все они используются в приведенных выше примерах.

Если все свойства столбца имеют свое начальное значение, расположение элемента будет идентичным в многоколоночный макет только с одним столбцом.

Промежутки между столбцами (диагональная штриховка) и правила столбцов показаны в этом примере представления контейнера с несколькими столбцами. с отступом (штриховка). Заштрихованные области представлены только в иллюстративных целях. В реальных реализациях эти области будут определяться фоном, второе изображение показывает рендеринг контейнера с несколькими столбцами с правилами столбцов. Макет с несколькими столбцами с выделенными невидимыми промежутками между столбцами и заполнением внутри многоцветного контейнера.Тот же макет, что и на первом изображении, так как он будет отображаться при реализации.

1.1. Определение значений

Эта спецификация следует соглашениям об определении свойств CSS из [CSS21] с использованием синтаксиса определения значений из [CSS-VALUES-3]. Типы значений, не определенные в этой спецификации, определены в CSS Values ​​& Units [CSS-VALUES-3]. Комбинация с другими модулями CSS может расширить определения этих типов значений.

В дополнение к значениям для конкретных свойств, перечисленным в их определениях, все свойства, определенные в этой спецификации также принимают ключевые слова CSS в качестве значения свойства.Для удобства чтения они явно не повторяются.

2. Многоколоночная модель

Элемент, для которого свойство column-width или column-count не установлено автоматически, устанавливает многоколоночный контейнер (или многоцветный контейнер для краткости), и поэтому действует как контейнер для многоколоночного макета.

В традиционной блочной модели CSS содержание элемента перетекала в поле содержимого соответствующего элемента. Многоколоночный макет вводит контекст фрагментации, образованный анонимными контейнерами фрагментации, называемыми столбцами (или столбцами для краткости).Эти поля столбцов устанавливают независимый контекст форматирования блока, в который перетекает содержимое контейнера с несколькими столбцами, и сформировать содержащий блок для его непозиционированных дочерних элементов.

В этом примере ширина изображения задается следующими правилами:
 img {дисплей: блок; ширина: 100%;} 

Учитывая, что поле столбца создает новый контекст форматирования блока, ширина рассчитывается относительно поля столбца. Поэтому изображение не будет выходить за пределы поля столбца:

Изображение ограничено полем столбца, в котором оно отображается.Учитывая, что поле столбца создает новый контекст форматирования блока, верхнее поле, установленное на первом дочернем элементе контейнера multicol, не сжимается с полями контейнера multicol. Поле над первым абзацем не свернулось, оставив поле 1em над первой строкой в ​​контейнере multicol.

Поплавки, которые появляются внутри многоколоночных макетов, располагаются с относительно поля столбца, в котором появляется поплавок.

В этом примере этот фрагмент CSS описывает представление изображения:
 img {display: block; float: right;} 

В HTML изображение появляется после окончания предложения «куриная ножка».

Изображение перемещается внутри поля столбца, в котором оно появляется.

Содержимое выходит за пределы поля столбца во фрагментах оси блока и продолжается в поле следующего столбца.

Примечание: поля столбцов, которые являются анонимными ячейками, не становятся содержащим блоком для абсолютно позиционированных ящиков. Свойство position, которое устанавливает содержащий блок для таких ящиков, применяется к многоцветному контейнеру, являющемуся основным блоком.

В этом примере контейнер с несколькими столбцами имеет position: relative, что делает его содержащим блоком.Изображение является прямым потомком контейнера с несколькими столбцами и имеет position: absolute. Он требует позиционирования из контейнера с несколькими столбцами, а не из поля столбца.
 .container {position: relative; column-count: 3;}
img {position: absolute; top: 20px; left: 40px;} 
На рисунке показано, что абсолютно позиционированное изображение позиционируется относительно контейнера multicol, а не поля столбца.

Ящики для колонн заказываются во внутреннем базовом направлении многоцветного контейнера и расположены в многоцветных линий .Ширина столбца - это длина поля столбца во внутреннем направлении. Высота столбца - это длина поля столбца в направлении блока. Все поля столбцов в строке имеют одинаковую ширину столбца, и все поля столбцов в строке имеют одинаковую высоту столбца.

В каждой мультиколоночной строке в многоколоночном контейнере соседние боксы столбцов разделены промежутком между столбцами , который может содержать правило столбца . Все промежутки между столбцами в одном и том же многоколоночном контейнере равны.Все правила столбцов в одном и том же контейнере с несколькими столбцами также равны, если они появляются; правила столбца появляются только между столбцами, у которых есть содержимое.

В простейшем случае мультиколоный контейнер будет содержать только одну строку столбцов, а высота каждого столбца будет эквивалентна используемая высота поля содержимого контейнера с несколькими столбцами. Однако фрагментация или гаечные ключи могут разбить содержимое контейнера с несколькими столбцами на несколько строк с несколькими столбцами.

Если контейнер с несколькими столбцами разбит на страницы, высота каждого столбца равна ограничены страницей, и содержимое продолжается в новой строке поля столбцов на следующей странице; поле столбца никогда не разделяется на страницы.

Тот же эффект возникает, когда охватывающий элемент делит контейнер с несколькими столбцами: столбцы перед охватывающим элементом сбалансированы и укорочены, чтобы соответствовать их содержанию. Контент после затем охватывающий элемент переходит в новую, следующую строку столбцов.

Демонстрация того, как покрывающий элемент разделяет контейнер multicol.

Контейнер с несколькими столбцами, следовательно, является обычным контейнером блока, который устанавливает новый независимый контекст форматирования, содержимое которого состоит из серии многоколоночных строк и многоцветных гаечных ключей.Каждая строка с несколькими столбцами действует как блок уровня блока, который устанавливает контекст форматирования нескольких столбцов для своих блоков столбцов; и каждый гаечный ключ действует как блок уровня блока, который устанавливает независимый контекст форматирования с его типом в зависимости от его отображаемого значения, как обычно.

Разрешены вложенные многостолбцовые контейнеры, но могут быть ограничения, зависящие от реализации.

Примечание: Невозможно установить свойства / значения для полей столбцов. Например, нельзя установить фон определенного поля столбца. а поле столбца не имеет понятия об отступах, полях или границах.В будущих спецификациях могут быть добавлены дополнительные функции. Например, могут поддерживаться столбцы разной ширины и разного фона.

Примечание. Многоцветные контейнеры с высотой столбцов больше, чем область просмотра, могут создавать проблемы с доступом.

3. Число и ширина столбцов

Определение количества и ширины столбцов имеет важное значение при размещении содержимого с несколькими столбцами. Эти свойства используются для установки количества и ширины столбцов:

Третье владение, колонны, - сокращенное свойство, которое устанавливает ширину столбца и количество столбцов.

Другие факторы, такие как явные разрывы столбцов, ограничения по содержимому и высоте, может повлиять на фактическое количество и ширину столбцов.

3.1. Встроенный размер столбцов: свойство ширины столбца

Это свойство описывает ширину столбцов в многоцветных контейнерах.

авто
означает, что ширина столбца будет определяться другими свойствами (например, количество столбцов, если у него неавтоматическое значение).
<длина [0, ∞]>
описывает оптимальную ширину столбца.Фактическая ширина столбца может быть шире (чтобы заполнить доступное пространство), или уже (только если доступное пространство меньше указанной ширины столбца). Отрицательные значения не допускаются. Используемые значения будут ограничены минимум 1 пикселем.
Например, рассмотрим эту таблицу стилей:
 div {width: 100px; column-width: 45px; column-gap: 0; column-rule: none;} 

Внутри элемента шириной 100 пикселей есть место для двух столбцов шириной 45 пикселей. Чтобы заполнить доступное пространство фактическая ширина столбца будет увеличена до 50 пикселей.

Также обратите внимание на эту таблицу стилей:
 div {width: 40px; column-width: 45px; column-gap: 0; column-rule: none;} 

Доступное пространство меньше указанной ширины столбца и поэтому фактическая ширина столбца будет уменьшена.

Чтобы гарантировать, что ширина столбца может использоваться с вертикальным текстом, Ширина столбца означает длину строк внутри столбцов.

Примечание. Причина, по которой ширина столбца должна быть несколько гибкой. заключается в создании масштабируемого дизайна, который может соответствовать разным размерам экрана.Чтобы установить точную ширину столбца, промежуток между столбцами и ширина многоцветного контейнера (при условии горизонтального текста) также необходимо указать.

3.2. Число столбцов: свойство подсчета столбцов

Это свойство описывает количество столбцов в многоцветном контейнере.

авто
означает, что количество столбцов будет определяться другими свойствами (например, ширина столбца, если у него неавтоматическое значение).
<целое [1, ∞]>
описывает оптимальное количество столбцов, в которые будет перетекать содержимое элемента.Значения должны быть больше 0. Если и ширина столбца, и счетчик столбцов имеют неавтоматические значения, целочисленное значение описывает максимальное количество столбцов.
Пример:
 body {column-count: 3} 

3.3. Ширина и количество столбцов Сокращение: Свойство столбцов

Это сокращенное свойство для установки ширины столбца и количества столбцов. Пропущенные значения устанавливаются на свои начальные значения.

Вот некоторые допустимые объявления, использующие свойство columns:
 столбцов: 12em; / * ширина столбца: 12em; количество столбцов: авто * /
columns: auto 12em; / * ширина столбца: 12em; количество столбцов: авто * /
столбцы: 2; / * ширина столбца: авто; количество столбцов: 2 * /
столбцы: 2 авто; / * ширина столбца: авто; количество столбцов: 2 * /
columns: auto; / * ширина столбца: auto; количество столбцов: авто * /
столбцы: авто авто; / * ширина столбца: авто; количество столбцов: авто * / 

3.4. Псевдо-алгоритм

Приведенный ниже псевдоалгоритм определяет используемые значения для количества столбцов (N) и ширины столбца (W). Есть еще одна переменная в псевдо-алгоритме: U - используемая ширина контейнера с несколькими столбцами.

Примечание: используемая ширина U многоколоночного контейнера может зависеть от содержимого элемента, в этом случае это также зависит от вычисленных значений свойств column-count и column-width. Эта спецификация не определяет, как рассчитывается U.Ожидается, что это будет определять другой модуль (возможно, базовая модель бокса [CSS3BOX] или модуль внутреннего и внешнего изменения размеров [CSS3-SIZING]).

Функция floor (X) возвращает наибольшее целое число Y ≤ X.

 (01) if ((column-width = auto) and (column-count = auto)), то
(02) выход; / * не многоцветный контейнер * /
(03) если ширина столбца = авто, то
(04) N: = количество столбцов
(05) иначе, если количество столбцов = авто, то
(06) N: = max (1,
(07) пол ((U + промежуток между столбцами) / (ширина столбца + промежуток между столбцами)))
(08) еще
(09) N: = min (количество столбцов, max (1,
(10) этаж ((U + промежуток между столбцами) / (ширина столбца + промежуток между столбцами))))
 

А:

 (11) W: = max (0, ((U + столбец-промежуток) / N - столбец-промежуток))
 

Для определения количества автоматически повторяющихся столбцов, UA должен уменьшить размер столбца до значения, указанного UA, чтобы избежать деления на ноль.Рекомендуется, чтобы этот пол был не более 1 пикселя.

В фрагментированных контекстах, например, в постраничных медиа, Пользовательские агенты могут выполнять это вычисление для каждого фрагмента.

Используемое значение для количества столбцов вычисляется без учета явных разрывов столбцов или ограниченной высоты столбца, в то время как фактическое значение учитывает их.

В этом примере фактическое количество столбцов выше, чем используемое количество столбцов. из-за явных разрывов столбцов:
 div {width: 40em; columns: 20em; column-gap: 0;}

p {break-after: column;} 
 

один

два

три

Вычисленное количество столбцов автоматически, используемое количество столбцов равно 2, а фактическое количество столбцов равно 3.Фактическое количество столбцов может быть меньше, чем используемое количество столбцов. Рассмотрим этот пример:
 div {width: 80em; height: 10em; columns: 20em; column-gap: 0; column-fill: auto;} 
 
foo

Подсчет столбцов вычисляется автоматически, используемое количество столбцов - 4, а фактическое количество столбцов - 1.

3.5. Контекст стекирования

Все поля столбцов в контейнере с несколькими столбцами находятся в одном контексте наложения и порядок отрисовки их содержимого указан в CSS 2.1. Поля столбцов не устанавливают новый контекст наложения.

4. Пробелы в столбцах и правила

Промежутки столбцов и правила помещаются между столбцами в одном и том же многоцветном контейнере. Длина промежутков между столбцами и правил столбца равна высоте столбца. Промежутки между колонками занимают место. То есть промежутки между столбцами будут раздвигать содержимое в соседних столбцах. (в том же разноцветном контейнере).

Линия столбца рисуется в середине промежутка столбца с конечными точками на противоположных краях содержимого контейнера multicol.Правила столбца не занимают места. То есть наличие или толщина правила столбца не повлияет на размещение чего-либо еще. Если правило столбца шире, чем его промежуток, соседние поля столбцов будут перекрывать правило, и правило, возможно, может выходить за пределы коробки многоцветного контейнера. Правила столбцов нарисованы прямо над границей многоцветного контейнера. Для прокручиваемых многоцветных контейнеров обратите внимание, что хотя граница и фон многоцветного контейнера явно не прокручиваются, правила нужно прокручивать вместе со столбцами.Правила для столбцов рисуются только между двумя столбцами, в каждом из которых есть содержимое.

4.1. Желоба между столбцами: свойство зазора между столбцами

Свойство column-gap определено в [CSS3-ALIGN].

В контексте форматирования с несколькими столбцами используемое значение normal для свойства column-gap равно 1em. Это обеспечивает читаемость столбцов при использовании начальных значений. Если между столбцами есть правило столбца, он появится в середине промежутка.

4.2. Цвет правил столбца: свойство

цвета правила столбца.
<цвет>
Задает цвет правила столбца.

4.3. Стиль правил столбца: свойство

стиля правила столбца

Свойство column-rule-style устанавливает стиль правила между столбцами элемента. Значения интерпретируются как в модели сворачивающейся границы.

Значение none заставляет вычисленное значение ширины правила столбца равняться 0.

4.4. Правила ширины столбца: свойство ширины правила столбца

Это свойство устанавливает ширину правила между столбцами. Отрицательные значения не допускаются.

4.5. Сокращение правила столбца: свойство правила столбца

Это свойство является сокращением для установки ширины правила столбца, стиля правила столбца и цвета правила столбца в одном и том же месте таблицы стилей. Пропущенные значения устанавливаются на свои начальные значения.

В этом примере линейка столбца и промежуток между столбцами имеют одинаковую ширину.Следовательно, они будут занимать точно такое же пространство.
 body {column-gap: 35px; column-rule-width: 35px; column-rule-style: solid; column-rule-color: black;} 
Линия столбца и промежуток между столбцами занимают одинаковое пространство.

5. Разрывы столбцов

Когда контент размещен в нескольких столбцах, агент пользователя должен определить, где размещаются разрывы столбцов. Проблема разбиения содержимого на столбцы аналогична разбивке содержимого на страницы, который описан в CSS 2.1, раздел 13.3.3 [CSS21].

Введены три новых свойства, позволяющих описывать разрывы столбцов в тех же свойствах, что и разрывы страниц: разрыв до, разрыв после и разрыв внутри.

5.1. Контроль фрагментации: свойства взлома до, после, взлома

break-before, break-after и break-inside определены в [CSS3-BREAK].

6. Распределительные колонны

Свойство column-span позволяет элементу занимать несколько столбцов.

6.1. Распределение элемента по столбцам: свойство

диапазона столбцов

Это свойство описывает, сколько столбцов занимает элемент. Значения:

нет
Элемент не занимает несколько столбцов.
все
Элемент извлекается из потока и охватывает все столбцы ближайшего многоцветного предка. в том же контексте форматирования блока. Контент в нормальном потоке, который появляется перед элементом автоматически балансируется по всем столбцам в непосредственно предшествующей строке с несколькими столбцами перед появлением элемента.Элемент устанавливает независимый контекст форматирования.

Примечание: устанавливает ли элемент новый контекст форматирования, не зависит от того, является ли элемент потомком multicol или нет. Когда column-span - это все, так всегда бывает. Это помогает сделать дизайн более надежным для более поздних версий, в которых убирается многоцветность, или когда медиа-запросы в некоторых ситуациях отключают мультиколл.

Элемент, охватывающий более одного столбца, называется охватывающим элементом , а поле, которое он создает, называется гаечным ключом .

Гаечный ключ становится вмещающим блоком для абсолютно расположенных ящиков внутри гаечного ключа. где остовный элемент устанавливает содержащий блок, в противном случае содержащая цепочка блоков переходит в контейнер multicol.

Перемычка выводится из потока, оставляя вынужденный разрыв. Это не влияет на порядок рисования [CSS21] связующего элемента.

В этом примере элемент h3 был добавлен в образец документа после шестого предложения. (я.е., после слов «нога а»). Этот стиль применяется:
 h3 {column-span: all; background: silver} 

Установив столбец для всех, весь контент, который появляется перед элементом h3 отображается перед элементом h3 .

Для элемента h3 установлено значение column-span: all

Остовный элемент может быть ниже первого уровня потомков. если они являются частью одного контекста форматирования. Если фрагмент перед гаечным ключом пуст, ничего особенного не происходит; верхнее поле / граница / отступы находятся над охватывающим элементом как пустой фрагмент.

В этом примере многоцветный контейнер - это элемент article . Внутри этого родителя находится абзац, а затем элемент раздела. Раздел содержит заголовок h3 , заданный для всего, что охватывает все три столбца, в то время как содержащий раздел остается внутри полей столбцов.

h3 - первый дочерний элемент секции. Это означает, что маржа, граница (показана красным на схеме) и заполнение в этом разделе появляется перед охватом h3 как пустой фрагмент.

 

...

Элемент h3

...

 section {border: 2px сплошной красный; margin-top: 65px; padding-top: 20px;}

h3 {диапазон столбцов: все; фон: серебро
} 
Для элемента h3 установлено значение column-span: all, раздел имеет красную рамку, верхний отступ и поле

Охватывающий элемент занимает больше места, чем в противном случае. Когда пространство ограничено, может быть невозможно найти место для перекрывающего элемента.В этих случаях пользовательские агенты могут обрабатывать элемент так, как если бы он не был указан в этом свойстве.

В этом примере элемент h3 появляется позже в контенте, и высота многоцветного контейнера ограничена. Следовательно, элемент h3 появляется в переполнении и нет места, чтобы сделать элемент охватывающим. В результате элемент выглядит так, как будто диапазон столбцов: ни один не был указан. Элемент h3 находится в столбце переполнения и выглядит так, как будто ни один столбец не указан Этот пример похож на предыдущий, за исключением того, что элемент h3 естественно появляется в последнем столбце.Тем не менее, недостаточно места, чтобы сделать элемент перекрывающим. Элемент h3 находится в последнем столбце и выглядит так, как будто ни один столбец не указан. В фрагментированных контекстах охватывающие элементы учитываются во всех фрагментах. В этом примере мы находимся в постраничном медиа, и первые три абзаца имеют разрывы столбцов после них. После четвертого абзаца появляется элемент, охватывающий h3 . Это появится на первой странице Это появится на второй странице

Гаечные ключи блочные ящики поэтому края двух смежных гаечных ключей сожмутся друг с другом.Поскольку поля столбцов устанавливают новый контекст форматирования блока, поля на элементах внутри поля столбца не исчезнут с полем гаечного ключа.

Гаечные ключи устанавливают новые контексты форматирования, но их поля могут изменяться в зависимости от их окружения. В этом примере два гаечных ключа естественно оказываются вверху страницы. Верхнее поле первого гаечного ключа усечено из-за примыкания к невынужденному разрыву. Поля между двумя гаечными ключами сходятся друг с другом. Однако нижнее поле второго гаечного ключа не сжимается с верхним полем последующего элемента.
 h3 {margin: 16px0; диапазон столбцов: все; фон: серебро
}
p {margin-top: 16px} 
Поля схлопываются между двумя охватывающими элементами, но не нижнее поле гаечного ключа и верхнее поле следующего элемента.

7. Заполнение колонн

Есть две стратегии заполнения столбцов: столбцы могут быть как сбалансированными, так и нет. Если столбцы сбалансированы, пользовательские агенты должны попытаться минимизировать различия в высоте столбца, чествуя вынужденных перерывов, вдов и сирот, и другие свойства, которые могут повлиять на высоту столбцов.Если столбцы не сбалансированы, они заполняются последовательно; некоторые столбцы могут оказаться частично заполненными или вообще не содержать содержимого.

7.1. Балансировка столбца: свойство заполнения столбца

Это свойство указывает, в строке с несколькими столбцами, в которой , а не непосредственно предшествует гаечному ключу, сбалансирован по столбцам или нет. Значения:

остаток
По возможности равномерно распределите содержимое между столбцами.В фрагментированных контекстах сбалансирован только последний фрагмент.
остаток
По возможности равномерно распределите содержимое между столбцами. В фрагментированных контекстах все фрагменты сбалансированы.
авто
заполнять столбцы последовательно

В непрерывном контексте это свойство не имеет никакого эффекта при наличии столбцов переполнения.

В этом примере в статье всего один короткий абзац, который умещается на трех строках.Три строки отображаются в трех разных колонны за счет балансировки колонн.
 article {width: 60em; height: auto; columns: 4; column-fill: balance;} 
Три строки отображаются в трех столбцах за счет балансировки столбцов. В этом примере балансировка столбцов отключена, а статья имеет высоту:
 article {width: 60em; height: 4em; columns: 4; column-fill: auto;} 

В результате первый столбец заполняется всем содержимым:

Никакой балансировки, поэтому весь текст отображается в одном абзаце.В этом примере статья состоит из двух абзацев: сначала длинный, потом покороче. Этот код применяется:
 article {width: 60em; height: auto; columns: 4; column-fill: balance;}

p {break-after: column;} 

Наименьшая возможная высота столбца содержит пять строк текста. После того, как высота столбца установлена, столбцы заполняются последовательно. В результате высота третьего столбца равна высоте первых двух столбцов, в то время как последний столбец оказывается значительно короче.

Как только высота столбца установлена, столбцы заполняются последовательно.
 article {width: 60em; height: auto; columns: 4; column-fill: balance;} 

В этом примере статья начинается с неразрывной фигуры, которая устанавливает высоту столбца. Последующее содержимое заполняется последовательно в оставшиеся столбцы:

Высота колонны определяется цифрой.

8. Перелив

8.1. Перелив внутри многоцветных контейнеров

За исключением случаев, когда это может привести к разрыву столбца, содержимое, выходящее за пределы полей столбцов заметно переполняется и не закрепляется за рамкой столбца.

Примечание. См. Раздел 5 «Разрывы столбцов» для получения информации о разрывах столбцов и §8.2 Разбивка на страницы и переполнение за пределами многоцветных контейнеров для определения того, прирезается ли он к блоку содержимого многоколоночного контейнера.

В этом примере изображение шире, чем столбец: Контент явно переполняется и не ограничивается рамкой столбца.

8,2. Пагинация и переполнение за пределами многоцветных контейнеров

Правила содержимого и столбцов, выходящие за пределы полей столбцов в края контейнера с несколькими столбцами обрезаются в соответствии со свойством переполнения.

В многоцветном контейнере может быть больше колонн, чем вмещается из-за:

  • объявление, ограничивающее высоту столбца (например, используя высоту или максимальную высоту). В этом случае дополнительные поля столбцов создаются во внутреннем направлении.
  • размер страницы. В этом случае дополнительные поля столбцов перемещаются на следующие страницы.
  • явный разрыв столбца. В этом случае дополнительные поля столбцов создаются во внутреннем направлении для непрерывных контекстов. и дополнительные поля столбцов перемещаются к следующему фрагменту (фрагментам) для фрагментированного носителя.

Столбцы, которые появляются вне многоцветного контейнера в непрерывном контексте называются столбцами переполнения . Столбцы переполнения могут повлиять на высоту многоцветного контейнера.

В этом примере высота контейнера с несколькими столбцами ограничена максимальной высотой. Кроме того, в таблице стилей указано, что должно быть видно переполненное содержимое:
 div {max-height: 5em; overflow: visible;} 

В результате количество столбцов увеличено.

Столбец переполнения создается во внутреннем направлении.

В непрерывном контексте столбцы переполнения могут влиять на высоту многоцветного контейнера. В этом примере в переполнении появляется столбец с четырьмя строками текста. Многоцветный контейнер делают достаточно высоким, чтобы вместить эту колонну.

Последний столбец - столбец переполнения, но он выше остальных. Емкость достаточно высока для этой колонны. В фрагментированных контекстах содержимое переполнения переходит в столбцы в последующих фрагментах.Учитывая то же содержание, что и в примере 31 и страничный блок, в котором есть место только для пяти строк форматированного текста, это появится на первой странице: Первые три абзаца появляются на первой странице.

Предполагая балансировку столбцов, это будет отображаться на второй странице:

Столбец переполнения перемещен на вторую страницу. В этом примере явные разрывы столбцов создаются после абзацев:
 p {break-after: column;} 

В результате количество столбцов увеличивается, а дополнительные столбцы добавляются во внутреннем направлении:

Столбец переполнения создается во внутреннем направлении.На страничных носителях дополнительные столбцы отображаются на следующей странице. Учитывая тот же код, что и в предыдущем примере, последний абзац появляется на второй странице. Это появилось бы на первой странице: Первые три абзаца появляются на первой странице.

Это появится на второй странице:

Столбец переполнения перемещен на вторую страницу.

Из-за балансировки столбцов последний абзац разделен на три столбца.

Приложение B. Изменения

Это приложение информационное .

Изменения из рабочего проекта (WD) от 15 октября 2019 г.

  • Добавлен текст «Гаечный ключ становится содержащим блоком для абсолютно позиционированных ящиков внутри гаечного ключа, где охватывающий элемент устанавливает содержащий блок, в противном случае содержащая цепочка блоков переходит в контейнер multicol.». Решено 23 окт.2020 г.
  • Добавление текста «Это свойство указывает, в строке с несколькими столбцами, в которой , а не , непосредственно предшествует гаечному ключу сбалансировано по столбцам или нет."Решено 29 апреля 2020 г.

Изменения из рабочего проекта (WD) от 28 мая 2018 г.

  • Удален ненормативный текст. «Однако, как описано ниже, установка ширины и количества столбцов редко имеет смысл». От редакции 16 сентября 2019 г., выпуск 4291.
  • Добавлен абзац «Гаечные ключи - блоки блочного уровня. поэтому края двух смежных гаечных ключей сожмутся друг с другом. Поскольку поля столбцов устанавливают новый контекст форматирования блока, поля на элементах внутри поля столбца не исчезнут с полем гаечного ключа."Решение принято 22 октября 2018 г., см. Также решение по вопросу 2582.
  • Уточнена спецификация, поясняющая, что перекрывающий элемент выводится из потока, оставляя принудительный разрыв. Добавлен абзац: «Охватывающий элемент выводится из потока, оставляя принудительный разрыв. Это не влияет на порядок рисования связующего элемента». Решено 28 февраля 2019 г.
  • Определение свойства column-gap перемещено в [CSS3-ALIGN] и добавлен абзац, подробно описывающий особенности column-gap в multicol:
    «В контексте форматирования с несколькими столбцами используемое значение normal для column-gap свойство 1em.Это обеспечивает читаемость столбцов при использовании начальных значений. Если между столбцами есть правило столбца, оно появится в середине промежутка ». Решение принято 4 июня 2019 г.
  • Изменил формулировку раздела Модель с несколькими столбцами на основе данных Мортена Стенсхорна в выпуске 2203.
  • Удален маркер риска из значения длины в процентах для зазора столбца. Решено 4 июня 2019 г.
  • Обновлено введение, чтобы убрать упоминание о преимуществах многоцветного изображения перед использованием таблиц для разметки и вместо этого указать на уникальные характеристики многоцветного изображения.Редакционное изменение, упомянутое в выпуске 3654.
  • Изменено предложение, добавленное в раздел псевдо-алгоритма после разрешения от 7 января 2016 года, чтобы оно относилось к столбцам , а не дорожкам , поскольку дорожки не определены в этой спецификации. Решено 13 марта 2019 г.
  • Изменения и пояснения к изображениям SVG, используемым в спецификации.
  • Изменен синтаксис для использования обозначения диапазона в квадратных скобках, чтобы отразить прозаические ограничения на отрицательные / ненулевые значения.

Изменения из рабочего проекта (WD) от 5 октября 2017 г.

  • Изменены ссылки на мультимедийные данные с разбивкой на страницы для ссылки на фрагментированные контексты. Решение решено 12 апреля 2018 г.
  • Изменена строка, относящаяся к свойству заполнения столбца :
    В непрерывном носителе это свойство не влияет на столбцы переполнения.
    Кому:
    В непрерывном носителе это свойство не действует при наличии столбцов переполнения. Решено: 12 апр 2018 г.
  • Добавьте строку текста и пример, чтобы показать, что столбцы переполнения могут влиять на высоту многоцветного контейнера.Решено: 12 апреля 2018 г.
  • Заменены примеры макетов HTML версиями SVG, так как примеры были нечеткими. Проблема 1087.
  • Изменил значение normal для column-gap на 1em, а не на длину, заданную UA, предложив 1em. Решено: 4 апр 2018 г.
  • Разъяснено, что отрицательные значения не допускаются для ширины столбца и что, хотя можно указать 0, используемые значения будут ограничены минимум 1 пикселем. Решено: 14 марта 2018 г.
  • Пояснено, что при наличии охватывающего элемента содержимое автоматически балансируется по всем столбцам в строке непосредственно предшествующего столбца перед появлением элемента.Решено: 9 ноября 2017 г.
  • Добавлено пояснение и дополнительный пример того, что охватывающие элементы могут быть ниже первого уровня потомков, и что в случае полей, границ и отступов на элементе, содержащем охват, они будут нарисованы над гаечным ключом. Решено: 8 ноября 2017 г.
  • Изменено предложение Правила столбцов отображаются на уровне встроенного содержимого, но ниже всего встроенного содержимого внутри элемента multicol. С по Правила столбцов отображаются чуть выше границы элемента multicol.Для прокручиваемых многоцветных элементов обратите внимание, что хотя граница и фон многоцветного элемента, очевидно, не прокручиваются, правила должны прокручиваться вместе со столбцами. Решено: 7 нояб.2017 г.
  • В разделе Модель с несколькими столбцами удалены два предложения. То есть поля столбцов ведут себя как блоки уровня блока, ячейки таблицы и встроенные блоки в соответствии с CSS 2.1, раздел 10.1, элемент 2 CSS21. Однако поля столбцов не устанавливают блоки контейнеров блоков для элементов с position: fixed или position: absolute.. Они были заменены разъяснением основного блока и новым примером, показывающим, как элементы abspos относятся к контейнеру multicol. Решено: 7 ноября 2017 г.
  • Удалено предложение «Чтобы указать, где должны (или не должны) появляться разрывы столбцов, вводятся новые значения ключевых слов». и следующий пример (Пример 7 в WD, опубликованном 5 октября 2017 г.), поскольку спецификация multicol больше не вводит эти свойства. Редакционная
  • Изменен способ ссылки на элемент, к которому мы применили multicol, с многоколоночного или многоцветного элемента на многоколоночный или мультиколоночный контейнер .Решено: 22 ноября 2017 г.
  • Удален пример, в котором говорилось: «Если высокое изображение перемещается в столбец на следующей странице, чтобы найти для него место, его естественный столбец может быть оставлен пустым. Если это так, столбец по-прежнему считается имеющим содержимое для целей решая, следует ли рисовать правило столбца ". Решено: 7 сентября 2017 г.

Изменения по сравнению с Рекомендацией кандидата (CR) от 12 апреля 2011 г.

Вопросы конфиденциальности и безопасности

Multicol не представляет новых утечек конфиденциальности, или соображения безопасности помимо «правильно реализовать».

Благодарности

Этот документ основан на нескольких более старых предложениях и комментариях к более ранним предложениям. Среди авторов:

Могилевский Алексей, Энди Кларк, Антон Проуз, Берт Бос, Бьорн Хёрманн, Седрик Саварезе, Крис Лилли, Крис Уилсон, Дэниел Глазман и Дэйв Рэггетт, Дэвид Хаятт, Дэвид Сингер, Дэвид Вулли, Элика Этемад, Джованни Кампанья, Ян Хиксон. Йост де Валк, Кевин Ловер, Л. Дэвид Барон, Маркус Мильке, Мелинда Грант, Майкл Дэй, Мортен Стенсхорн, Эйвинд Стенхауг, Питер Линсс, Питер-Пауль Кох, Роберт О’Каллахан, Роберт Стеван, Сергей Генкин, Шелби Мур, Стив Зиллес, Сильвен Галино, Тантек Челик, Тиль Хальбах

Требования к соответствию выражаются комбинацией описательные утверждения и терминология RFC 2119.Ключевые слова «ДОЛЖНЫ», «НЕ ДОЛЖЕН», «ОБЯЗАТЕЛЬНО», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «РЕКОМЕНДУЕТСЯ», «МОЖЕТ» и «ДОПОЛНИТЕЛЬНО» в нормативных частях настоящего документ следует интерпретировать, как описано в RFC 2119. Однако для удобства чтения эти слова не отображаются в верхнем регистре. буквы в этой спецификации.

Весь текст данной спецификации является нормативным, кроме разделов явно помечены как ненормативные, примеры и примечания. [RFC2119]

Примеры в этой спецификации представлены словами «например» или выделены отдельно от нормативного текста с помощью class = "example" , примерно так:

Информационные заметки начинаются со слова «Примечание» и выделяются нормативный текст с class = "note" , например:

Примечание, это информационное примечание.

Рекомендации - это нормативные разделы, призванные привлечь особое внимание. отделить от другого нормативного текста кодом , например это: UA ДОЛЖНЫ предоставлять доступную альтернативу.

Таблица стилей соответствует этой спецификации если все его утверждения, которые используют синтаксис, определенный в этом модуле, действительны в соответствии с общей грамматикой CSS и отдельными грамматиками каждого функция, определенная в этом модуле.

Средство визуализации соответствует этой спецификации если в дополнение к интерпретации таблицы стилей, как определено соответствующие спецификации, он поддерживает все определенные функции по этой спецификации, правильно проанализировав их и соответствующим образом отрисовываем документ.Однако неспособность UA для корректной визуализации документа из-за ограничений устройства не делает UA несоответствующим. (Например, UA не требуется для воспроизведения цвета на монохромном мониторе.)

Инструмент разработки соответствует этой спецификации. если он пишет синтаксически правильные таблицы стилей в соответствии с общая грамматика CSS и отдельные грамматики каждой функции в этот модуль и соответствовать всем остальным требованиям соответствия таблиц стилей как описано в этом модуле.

Чтобы авторы могли использовать правила синтаксического анализа с прямой совместимостью, чтобы назначать резервные значения, средства визуализации CSS должны обрабатывать как недопустимые (и игнорировать при необходимости) любые правила, свойства, значения свойств, ключевые слова, и другие синтаксические конструкции, для которых у них нет пригодного уровня служба поддержки. В частности, пользовательские агенты не должны выборочно игнорировать неподдерживаемые значения компонентов и соблюдать поддерживаемые значения в одном объявление многозначного свойства: если какое-либо значение считается недопустимым (поскольку должны быть неподдерживаемые значения), CSS требует, чтобы все объявление игнорировать.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *