Разметка столбца CSS3 с динамическим числом столбцов

У меня есть набор изображений, которые я хочу отобразить в следующем шаблоне:

[1] [4] [7] [10] [13]
[2] [5] [8] [11] ...
[3] [6] [9] [12]

Я знаю, что всегда могу вручную группировать 3 изображения в div.column или что-то подобное, но я хочу достичь этого макета с помощью как можно более простого HTML. Изображения 225x150.

В настоящее время у меня есть следующий HTML:

<div class='album'>
    <img src='img/01.jpg' />
    <img src='img/01.jpg' />
    ...
</div>

И вот моя таблица стилей:

.album {
    background: #faa;
    display: block;
    -webkit-column-count:2;
    -webkit-column-gap: 10px;
    height: 450px;
    width: 460px;

}
.album img {
    display: block;
    width: 100%;
}

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

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

Ни одна из возможностей, которые я пробовал, не срабатывала. (100%, auto, играемый с помощью overflow)

Есть ли у кого-нибудь идея о том, как я могу создать такой элемент оболочки для своих альбомов?

ОТВЕТЫ

Ответ 1

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

http://codepen.io/cimmanon/pen/vuxjF

.album {
  background: #faa;
  height: 480px;
  padding: 5px;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
@supports (flex-wrap: wrap) {
  .album {
    display: inline-flex;
  }
}

.album img {
  margin: 5px;
}

Ответ 2

Имущество было задано также в С подсчетом столбца, можете ли вы динамически изменять от 3 до 2 столбцов, если разрешение меньше?. CSS columns ответил, что может быть хорошо проверить? (столбцы являются строкой для ширины столбца + столбца, см. спецификация и codepen demo).

Обратите внимание, что поддержка браузера меняется и в настоящее время необходимы префиксы -moz/-webkit (http://caniuse.com/#search=column).