"Meglio" mobile nei CSS

Question

Sto sperimentando con i CSS e la proprietà float. Ho questo "sito", con un sacco di div allineato al 80px griglia e float: left:

C'è un modo in CSS per renderlo simile a questo - così gli elementi possono utilizzare lo spazio vuoto sopra di loro ?

Senza JavaScript, se è possibile.

Grazie, Martin.

Answer 1

per la piastrellatura contenuto dinamico sia in orizzontale che in verticale, le opzioni CSS sono:

• float:left, come avete già visto, offre solo piastrelle orizzontale limitato.
• display:inline-block dà un risultato diverso da float:left, ma senza piastrellatura.
• CSS multi-column layout non è ancora completamente definito. Supporta il flusso verticale in colonne implicite, ma probabilmente non in un modo che si qualifica come piastrellatura.
• flexible box layout non è ancora ben supportato. Supporta un tipo di flusso orizzontale o verticale che potrebbe non essere definito come piastrellatura, anche se sembra un passo nella giusta direzione.

In breve, anche gli standard CSS che non sono completamente definiti non sembrano supportarli; quindi potrebbe essere molto lontano. L'opzione di fallback più semplice è usare un plug-in jQuery.

Oltre a Masonry (come suggerito da @Billy Moat), un altro paio di plug-in jQuery sono Isotope e Tiles Gallery. La muratura sembra essere menzionata più spesso.

Answer 2

No, questo non può essere fatto in CSS. Il modo migliore è usare un elemento javascript chiamato muratura temo.

http://masonry.desandro.com/

Answer 3

Diciamo che il numero di px per andare fino a riempire lo spazio di 1 blocco è 50px. margin-top: -50px;

Non è magico, è solo un po 'manuale farlo per ognuno. Se i tuoi contenuti sono dinamici, questo non può funzionare, o ha bisogno di js per calcolare se dobbiamo salire o no, su più righe e tutto.

Answer 4

questo può essere fatto, ma come dice CHE, se il contenuto è dinamico, questo andrà male nei peggiori modi possibili.

Ma se si tratta di un sito statico, questo può essere fatto, di sicuro.

Per risolvere questo, pensare nei blocchi & gruppo e allinearli, all'interno di ciascun blocco riallinea tutti i blocchi.