CSS3 Spalten-Layout mit dynamischer Anzahl der Spalten

Question

Ich habe eine Reihe von Bildern, die ich in dem folgende Muster angezeigt werden soll:

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

Ich weiß, dass ich kann immer manuell Gruppe 3 Bilder in einen div.column oder etwas ähnlichem , aber ich möchte dieses Layout mit so einfachem HTML wie möglich erreichen. Die Bilder sind 225x150.

---

Derzeit habe ich die folgende HTML:

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

Und hier ist mein Sheet:

.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 in den Spezifikationen beschrieben, dass wenn ich eine Höhe angeben und die Inhalt wird nicht passen, mehr Spalten werden nach Bedarf erstellt, was im Grunde genau das ist, was ich möchte. Wie Sie sehen können, habe ich eine Hintergrundfarbe für das .album angegeben. Dies deckt allerdings nur die ersten beiden Spalten ab, da ich die Breite auf 460px gesetzt habe. Allerdings benötige ich wirklich ein Element, das die genaue Größe/Breite des Inhalts des Albums aufweist, d. H. Ein Element, das das Album mit dieser exakten Größe umhüllt.

Keine der Möglichkeiten, die ich versuchte, schien zu funktionieren. (100%, auto, gespielt mit overflow als auch)

Hat jemand eine Idee, wie ich solch ein Wrapper-Element für meine Alben erstellen könnte?

Answer 1

Möglicherweise stecken Sie zu diesem Zweck mit der Flexbox fest, da die Verwendung von Spalten innerhalb von Inline-Elementen (Inline-Block usw.) dazu führt, dass einige Browser die Breite des Elements falsch berechnen.

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; 
} 

Answer 2

Similary Sache wurde auch bei With column-count, can you dynamically change from 3 to 2 columns if resolution smaller? gefragt. CSS columns beantwortet es könnte gut sein, zu überprüfen? (Spalten ist ein Shorthad für Spaltenbreite + Spaltenanzahl, siehe the spec & codepen demo).

Beachten Sie, dass die Browserunterstützung variiert & -moz/-webkit Präfixe werden derzeit benötigt (http://caniuse.com/#search=column).