2013-12-15 17 views
11

Ho una serie di immagini che voglio da visualizzare nel seguente schema:CSS3 con il numero dinamica di colonne

[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?

risposta

6

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

Grazie per la risposta, ma il mio problema principale persiste. Come faccio a fare in modo che '.album' abbia la larghezza minima per adattarsi al suo contenuto o avvolgerlo in un elemento con quella dimensione? –

+0

In alternativa, come imporre determinate immagini in una nuova colonna? –

+0

L'altezza sta forzando gli elementi ad avvolgere. A quanto pare, Webkit/Blink ha un'interpretazione diversa di inline-flex di Presto, e funziona esattamente come previsto :-(Non sono sicuro chi è corretto qui. – cimmanon

Problemi correlati