Ciao a tutti,
vorrei sapere se è possibile posizionare elementi (div o li) facendo in modo che, quando raggiungono la fine del contenitore, proseguano a finaco...
esempio:
_____________________
| box 1 | box 3 | box 5 |
| box 2 | box 4 | box 6 |
____________________
CONDIZIONI:
- Non conosco quanti elementi dovrò formattare
- vorrei fare in modo che siano tutti allo stesso livello, quindi non vorrei inserilrli a 2 a 2 in un contenitore float
è possibile?
grazie
fox
coi soli css (vedi qui come partenza http://www.w3schools.com/css/css3_multiple_columns.asp, ma trovi molti esempi in rete) non avresti supporto per le versioni di explorer precedenti alla 10, necessario per un risultato crossbrowser il ricorso a javascript.
Qui esempi con jquery http://www.jqueryscript.net/demo/jQu...nizer/samples/
Ciao,
più che il Multiple Colums sarebbe più adeguato il Flexible Box per ciò che è stato indicato. Ad ogni modo, entrambi non sono supportati da versioni non recentissime di IE.
http://www.html.it/articoli/css-flexbox/
Quoto Prill sull'utilizzo di jQuery per avere una soluzione crossbrowser.
Qui un esempio col flexbox:
codice:<!DOCTYPE HTML> <html> <head> <title>Esempio</title> <meta charset="utf-8"> <style type="text/css"> .flexbox { display: flex; flex-direction: column; flex-wrap: wrap; height: 64px; /* tenere conto dei bordi */ width: 0; } .flexbox>div { width: 100px; height: 30px; margin:0; background:grey; color: white; border: 1px solid white; } </style> </head> <body> <div class="flexbox"> <div>box 1</div> <div>box 2</div> <div>box 3</div> <div>box 4</div> <div>box 5</div> <div>box 6</div> <div>box 7</div> <div>box 8</div> <div>box 9</div> <div>box 10</div> <div>box 11</div> <div>box 12</div> <div>box 13</div> </div> </body> </html>
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Permessi di invio
Rispondi quotando