Salve, ho creato una griglia di immagini servendomi di una lista non ordinata e di "display:incline-block", vi chiedo aiuto per scoprire come poter giustificare gli elementi della lista presenti in una "riga", grazie per l'aiuto, se non mi sono spiegato chiedete !!
Grazie Ancora!!
Se intendi avere tutti i box[*] alla medesima distanza come fossero celle di una tabella si può fare, ti consiglio invece di inline-block di usare display:block e float left, dopodiché devi settare un margine ai tuoi box per distanziarli e tener conto del margine residua che avrai ai lati della "griglia".
se ad esempio vuoi una griglia di 100px di larghezza, divisa in righe da 4 box da 20px con un margine destro di 5px, avrai bisogno che il contenitore <ul> abbia una larghezza di 105px, perchè dovrai tener conto del margine residuo dell'ultimo box della riga.
detto questo ultimo accorgimento è di non utilizzare questa tecnica per[*] che possono variare in altezza, dato che se un box avrà un'altezza diversa dagli altri, la griglia andrà a farsi friggere :-)
Spero di averti chiarito le idee fami sapere se è tutto ok :-)
In realtà si tratterebbe di immagini con tutte la medesima altezza, ma con larghezze differenti. la griglia contiene dunque un diverso numero di immagini per ogni "riga", dunque non penso che si possa risolvere come mi hai suggeritoGrazie mille, se avresti altri consigli ti prego di darmeli
Ahime allora non penso sia una cosa fattibile da CSS... ti posso solo consigliare il plugin jquery masonry, che smista gli elementi di una lista in modo da incastrarli uno con l'altro, ma anche in questo caso non è garantito che tutto lo spazio sia coperto.
spero di esserti stato utile.
ciao :-)
Ciao,
quello che hai riscontrato è un problema comune riguardo la giustificazione che non avviene per blocchi di testo che occupano una singola riga o, più in generale, per il testo che sta all'ultima riga (ad es. di un paragrafo con text-align:justify). L'allineamento giustificato infatti funziona su righe non interrotte. La dove c'è un ritorno a capo forzato o dove si ha il termine del blocco di testo, la riga non subirà l'allineamento giustificato (così come è normale che sia).
Le immagini ovviamente funzionano come il testo, dal momento che si tratta sempre di elementi inline. Le tue immagini, quindi, essendo disposte in singole righe, non subiscono alcuna giustificazione.
Se fai qualche ricerca con "css one line justify" (o qualcosa del genere) troverai sicuramente diverse informazioni.
Per IE esiste la proprietà text-align-last che permette proprio di forzare l'allineamento dell'ultima riga e risolvere questo problema.
Per gli altri normali browser si utilizza solitamente un workaround specificando la pseudoclasse :after con cui viene forzata la generazione di una riga fittizia dopo l'ultima con il solo scopo di poter quindi giustificare l'ultima riga (che sarà diventata la penultima).
Riportando tutto al caso tuo, potresti risolvere in questo modo:
Ricorda giusto di inserire uno spazio tra un'immagine e l'altra.codice:<!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS - one line justify</title> <style> li { height: 20px; line-height: 20px; text-align: justify; text-align-last: justify; /* IE */ } li:after { content: ""; display: inline-block; width: 100%; } </style> </head> <body> <ul>[*][img]image.jpg[/img] [img]image.jpg[/img][*][img]image.jpg[/img] [img]image.jpg[/img] [img]image.jpg[/img] [img]image.jpg[/img] [img]image.jpg[/img][*][img]image.jpg[/img] [img]image.jpg[/img] [img]image.jpg[/img][/list] </body> </html>
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Grazie mille per le risposte, proverò a vedere
Grazie ancora !!
Permessi di invio
Rispondi quotando