CSS3 con il numero dinamica di colonne

Question

Ho una serie di immagini che voglio da visualizzare nel seguente schema:

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

so che posso sempre manualmente Gruppo 3 immagini in una qualcosa di div.column o simili , ma voglio ottenere questo layout con il più semplice HTML possibile. Le immagini sono 225x150.

---

Attualmente, ho il seguente codice HTML:

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

Ed ecco il mio foglio di stile:

.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 nelle specifiche descrive che se a specificare l'altezza e la il contenuto non si adatta, più colonne vengono create in base alle esigenze, che è fondamentalmente solo ciò che voglio.

Come si può vedere, ho specificato un colore di sfondo per lo .album. Questo però copre solo le prime due colonne, poiché ho impostato la larghezza su 460px. Tuttavia, ho davvero bisogno di un elemento che abbia esattamente la dimensione/larghezza del contenuto dell'album, cioè un elemento che avvolge l'album con quella dimensione esatta.

Nessuna delle possibilità che ho provato sembrava funzionare. (100%, auto, riprodotto con overflow)

Qualcuno ha un'idea su come creare un elemento wrapper per i miei album?

Answer 1

Si può essere bloccati utilizzando Flexbox per questo scopo, poiché l'utilizzo di colonne all'interno di elementi inline (blocco in linea e così via) causa l'errata calcolo dell'ampiezza dell'elemento da parte di alcuni browser.

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

cosa Analogamente è stato chiesto anche With column-count, can you dynamically change from 3 to 2 columns if resolution smaller?. Risposta CSS columns potrebbe essere opportuno controllare? (le colonne sono un abbreviazione per la larghezza della colonna + il conteggio delle colonne, vedere the spec & codepen demo).

Nota che il supporto del browser varia & -moz/-webkit sono attualmente necessari prefissi (http://caniuse.com/#search=column).