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

У меня есть набор изображений, которые я хочу, чтобы отобразить в следующей схеме: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%; 
}

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

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

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

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

источник

2013-12-15 Christian Schnorr

Для этой цели вы можете использовать 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; 
}

источник

2013-12-15 17:39:28 cimmanon

Спасибо за ответ, но моя основная проблема сохраняется. Как сделать, чтобы «.album» имел минимальную ширину, чтобы соответствовать ее контенту или обернуть его элементом с таким размером? –

В качестве альтернативы, как заставить определенные изображения находиться в новом столбце? –

Высота заставляет элементы обертываться. Webkit/Blink, по-видимому, имеет другую интерпретацию inline-flex, чем Presto, и работает точно так, как ожидалось, там :-(Не уверен, кто здесь прав. – cimmanon

Similary вещь было предложено также в With column-count, can you dynamically change from 3 to 2 columns if resolution smaller?. CSS columns ответил, что может быть хорошо проверить? (столбцы - это указатель ширины столбца + столбец, см. the spec & codepen demo).

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

источник

2014-05-23 13:44:53 Touko

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

ответ

Смежные вопросы