Webquadro è nato per condividere la mia esperienza. Oggi però sono io che chiedo aiuto a tutti voi!
In rete non ho trovato la soluzione al mio problema, quindi pubblico questo post nella speranza di avere delle risposte attraverso i commenti.
Problema
L’intento è quello di realizzare un layout liquido composto da div della stessa larghezza ma con diverse altezze. ..
Con la proprietà Float e l’attributo left per div con uguale altezza si ottiene qualcosa del genere:
Se invece l’altezza dei div varia in base al contenuto si creano degli spazi verticali…
Ecco la resa per div di altezze diverse:
Il risultato che voglio ottenere invece è il seguente:
Ho provato a lavorare sui posizionamenti ma non sono riuscito ad arrivare ad una soluzione ottimale. Esiste qualche tecnica particolare che permette di aggirare il problema.
Ho letto interventi che per semplificare consigliano di organizzare il layout per colonne ma la mia intenzione è quella di mostrare i contenuti riga per riga.
Nota: Ringrazio stuz87 (che non ho avuto modo di contattare) per le immagini realizzate in un topic del forum di html.it
Nota2: Nel caso si arrivasse ad una soluzione aggiornerò il post con le tecniche proposte in modo da renderle disponibili a tutti.
Grazie in anticipo
AGGIORNAMENTO
Come evidenziato nei commenti i soli CSS non bastano per realizzare quanto spiegato sopra. Ci viene in aiuto Javascript (ed in particolare la libreria jQuery) con l’ottimo plugin Masonry
Non ho ancora avuto l’occasione di provarlo ma promette veramente bene. Appena possibile realizzerò un post sul plugin. Ringrazio Domenico per la segnalazione
Condividi
Se hai trovato interessante questo post, condividilo con i tuoi amici tramite i social network:
Per quanto mi riguarda l’unica soluzione è lavorare con delle colonne..ho sempre risolto in questo modo..
Vorrei realizzare un layout il più flessibile possibile.
Organizzando per colonne sono costretto a definire un numero di elementi massimo per mantenere la struttura ordinata.
Andando per righe invece il sito cresce omogeneamente in base al numero di contenuti…
nel secondo caso, con div di altezze diverse in base al contenuto, hai comunque settato un’altezza per i div nel foglio di stile? O hai eliminato la proprietà
height:280px;?
concordo con Angelo…escluso l’uso del position absolute per ovvie ragioni, l’unica è il float, raggruppando i div in tre colonne. una con i div 1-4-7, uno con i div 2-5-8, una con i div 3-6-9 . è davvero l’unica soluzione credimi. se l’ordine, a livello di html, deve essere per forza consecutivo allora ti consiglio di usare qualche js per il posizionamento, credo sia l’ultima spiaggia
@nando: i div non hanno l’altezza impostata perché devono adattarsi al contenuto
@Lauryn: provo a vedere con i js anche se l’idea era quella di lavorare di puro CSS
In ogni caso… Grazie a tutti!!!
Maurizio, hai provato ad utilizzare una lista inline al posto del semplice div?
oppure prova ancora utilizzando dei valori diversi per la proprietà display
http://www.w3schools.com/css/pr_class_display.asp
uno dei possibili valori table-xxx potrebbe risolvere il tuo problema.
Grazie per la segnalazione. Provo e vi faccio sapere
Aggiornamento:
Mi sono convertito (momentaneamente per problemi di tempo) all’organizzazione per colonne suggerita da voi. La resa è buona ma l’organizzazione dei contenuti non mi soddisfa in toto.
Allora, se ho capito bene dovresti semplicemente inserire tra il div1 e div4 un ulteriore div, chiamiamolo break, con codice “clear:both”.
in html così:
1
4
nel css così:
.break {clear:both}
con questo comando i div si allungano in base al loro contenuto.
Spero di esserti stato utile.
@Giuseppe:
Ho provato come dici ma il problema persiste… il div di break fa da blocco e non permette ai successivi di salire fino al div superiore.
Ciao scusa ho il tuo stesso problema io ricordo in giro che c’era un plugin in jquery che fa a caso nostro in pratica faceva tutto come nella 3a immagine…in pratica ricordo che tramite css non è possibile, l’unica soluzione è dividere per 3 colonne…tu come hai risolto???
Domenico ha trovato un ottimo plugin jQuery che potrebbe fare al caso nostro. Aggiorno con tutti i dettagli direttamente il post.
Grazie!