Come si può vedere nell'immagine ogni scatola ha un'altezza diversa e ci sono alcune scatole con larghezza doppia.stile Massoneria layout SOLO con i CSS
E 'possibile creare un layout in muratura in stile solo con i CSS?
Con il supporto CSS3 si potrebbe fare questo:
.container {
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
width: 360px;
}
.container div {
display: inline-block;
width: 100%;
background-color: red;
}
Senza il supporto CSS3, si deve ricorrere a js purtroppo.
Come ho detto, ci sono alcune caselle con doppia larghezza! (2 colonne, in questo caso). E sì, posso usare CSS3! – Bernat
L'ho esplorato per molto tempo, non è possibile solo con i CSS da solo. – alt
Il problema con questa soluzione è che gli elementi sono disposti dall'alto verso il basso, da sinistra a destra, mentre ciò che ci si aspetta di solito (presupposti culturali giustificati) è il layout da sinistra a destra, dall'alto verso il basso. Questo è lo showstopper per le solite raccomandazioni basate su colonne CSS3. –
Sto lavorando su un sito in questo momento con lo stesso tipo di aspetto, due colonne con l'occasionale scatola double-wide. Quello che faccio è separare il doppio dal resto del contenuto. Per esempio:
<div class="two-columns">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="double-wide">
</div>
<div class="two-columns">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Quindi è possibile applicare la soluzione colonna di CSS3 per solo la classe two-columns. Se è necessario supportare IE9, è necessario aggiungere uno JavaScript fallback.
hey amico Ricordo questo sito non so se vorreste verificarlo, non ricordo se funzionasse con js o pure css ma di sicuro non usava la muratura http: //www.leica- oskar-barnack-award.com/ spero che aiuti – Paradise
Dov'è il tuo codice che hai provato? Dov'è la tua sandbox online o jsfiddle? Se avessi cercato su SO, avresti scoperto che non è possibile replicare la Massoneria con i CSS e farlo funzionare cross-browser e cross-device. – Systembolaget
Vacci piano e respira lentamente ...;) – Bernat