Layout a 3 colonne - Senza colonne

Question

Come si codifica un layout a tre colonne in CSS quando l'ordine di origine salta da una colonna all'altra?

La pagina ha sette sezioni: this fiddle mostra come l'ordine sorgente richiesto è paragonabile al layout. Il numero è per la sua posizione nell'ordine di origine e il testo è dove dovrebbe apparire nella pagina.

http://jsfiddle.net/hpr2b/4/

Come si può vedere, vi sono essenzialmente tre colonne e tre righe, ma gli elementi della seconda fila dovrebbero non top-allineamento e la seconda fila non dovrebbe eliminare l' prima riga. Ogni sezione dovrebbe essere a filo con la parte inferiore della sezione che si trova sopra di esso.

Note:

• L'ordine sorgente corrisponde l'ordine che gli elementi hanno bisogno di apparire sui dispositivi mobili e, purtroppo, non può essere modificato

• anche io non hanno la possibilità di duplicare sezioni nel markup e quindi mostrandole/nascondendole in base alla larghezza della viewport

• Il posizionamento assoluto non è purtroppo un'opzione in quanto il layout m Ust adattarsi a qualsiasi larghezza di 320px viewport e fino

Ho provato una serie di ben note tecniche di layout CSS e il violino sopra mostra il tentativo più riuscito - qui è il codice utilizzato per la "riga superiore ":

.top-center { 
    float: left; 
    width: 55%; 
    margin-left: 25%; 
} 

.top-left { 
    float: left; 
    width: 25%; 
    margin-left: -80%; 
} 

.top-right { 
    float: right; 
    width: 20%; 
} 

Qui ci sono i problemi che sto incontrando:

1. IE 9/10 è un disastro completo (vedi sotto)

2. In Chrome, il div "Medio destro" cancella sempre il div "In alto a sinistra", impedendo che venga posizionato sotto "In alto a destra". Inoltre, se il div "Top Right" diventa troppo alto, si sovrappone a "Middle Right".

3. In Firefox, la seconda "riga" in alto si allinea, sovrapponendo le sezioni sinistra e destra della prima riga.

Ecco come appare in IE10:

e qui è in Firefox:

Answer 1

Se il posizionamento è così importante e non si può controllare l'ordine del codice HTML (presumo così dalla lettura della tua domanda), preferirei avere un abso un po 'usabile posizionamento del liuto usando CSS e raffina (onDomReady) usando javascript (che ti dà molta più libertà di scegliere il miglior algoritmo per il layout che ti serve, ma comunque un layout utilizzabile ma non perfetto per quei pochi anti-javascript-ragazzi là fuori).

Tuttavia, è difficile dirlo senza visualizzare il markup e i requisiti effettivi.

Answer 2

Se il posizionamento assoluto non è assolutamente un'opzione, è necessario calcolare l'altezza degli elementi prima della generazione della pagina e inserire ciascun blocco nella colonna corretta in base all'altezza. Fidati di me, il posizionamento assoluto è molto più facile!

Probabilmente vorrai qualcosa come Masonry. Imposta le colonne per te come richiesto. Fa affidamento sul posizionamento assoluto, ma questa è solo la tua unica opzione facile. Dovrai armeggiare un po 'con il codice per renderlo reattivo, l'ho fatto su un sito in sviluppo here ma non riesco a ricordare completamente cosa ho fatto, mi dispiace. Sentiti libero di guardare attraverso il codice sorgente però.

La muratura è piuttosto veloce; di seguito è l'impostazione di base, here are more details.

HTML

<div id="container"> 
    <div class="item">...</div> 
    <div class="item w2">...</div> 
    <div class="item">...</div> 
    ... 
</div> 

JavaScript

var container = document.querySelector('#container'); 
var msnry = new Masonry(container, { 
    // options 
    columnWidth: 200, 
    itemSelector: '.item' 
}); 

Answer 3

sono riuscito a fare il seguente schema con i CSS solo: http://jsfiddle.net/hpr2b/7/

.top-center { 
    width: 55%; 
    float: left; 
    margin: 10px 0 10px 25%; 
} 

.top-left { 
    float: right; 
    width: 25%; 
    margin: 10px 75% 40px -100%; 
} 

.top-right { 
    float: right; 
    width: 20%; 
    margin: 10px 0 40px 0; 
} 

.mid-center { 
    margin: 10px 20% 10px 25%; 
    clear: left; 
} 

.mid-left { 
    float: left; 
    clear: right; 
    width: 25%; 
    margin-top: -20px; 
} 

.mid-right { 
    float: right; 
    clear: right; 
    width: 20%; 
    margin-top: -20px; 
} 

.bottom-center { 
    margin: 0 20% 10px 25%; 
}