У меня есть набор изображений, которые я хочу отобразить в следующем шаблоне:
[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)
Есть ли у кого-нибудь идея о том, как я могу создать такой элемент оболочки для своих альбомов?
