указание контейнера div css, чтобы элементы, превышающие его высоту, продолжили в следующем «столбце»

Question

Как мне указать контейнер css div, чтобы он применял поведение, подобное столбцу, чтобы при превышении высоты контейнера элементами в его первом «столбце» элементы просто продолжались в следующем «столбце»контейнера.Моя цель - не указывать столбцы, а только i) высоту контейнера и ii) любые свойства, которые должны иметь элементы для заполнения «столбцов».

Спасибо,

Lille

Answer 1

Точно так же, как вы указываете любой div, вы можете присвоить ему class или id.

Что касается вашего намерения использовать div для принудительного примененияПоведение типа «столбец», вы ограничены либо ограниченной реализацией столбцов CSS:

#div_id {
  -moz-column-width: 10em;
  -webkit-column-width: 10em;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  -moz-column-rule: 1px solid #000;
  -webkit-column-rule: 1px solid #000;
  column-width: 10em; /* not well-implemented yet. */
  column-gap: 1em;
  column-count: 3;
  column-rule: 1px solid #000;
}

Если вы укажете -vendor-column-count: 3 и опустите -vendor-column-width, браузер будет реализовывать 3 столбца с ширинойавтоматически рассчитывается механизмом рендеринга, и наоборот, если вы укажете -vendor-column-width: 10em без указания -vendor-column-count, браузер рассчитает соответствующее количество отображаемых столбцов.

Очевидно, что эти свойства CSS3 реализуются только Chrome / Safari(-webkit) и Firefox (-moz).

Для кросс-браузерной поддержки вам потребуется использовать решение JavaScript (или использовать серверную технологию): у List Apart есть статья, которая ссылается на реализацию JS .