Puoi creare una griglia di box che riempiano tutta la larghezza del browser e che si disponga piacevolmente. Ciò è stato possibile per lungo tempo usando i float
, ma adesso con inline-block
è molto più facile. Gli elementi inline-block
sono come gli inline
ma in più possono avere una larghezza e una altezza. Vediamo gli esempi di entrambi gli approcci.
Sto flottando!
</div>Sto flottando!
</div>Sto flottando!
</div>Sto flottando!
</div>Sto flottando!
</div>Sto flottando!
</div>Sto flottando!
</div>Sto flottando!
</div>Sto flottando!
</div>Sto flottando!
</div>Sto flottando!
</div>Sto usando clear così non mi dispongo di fianco ai box qui sopra.
</div>
Puoi ottenere lo stesso effetto utilizzando il valore inline-block
della proprietà display
.
Sono un blocco inline!
</div>Sono un blocco inline!
</div>Sono un blocco inline!
</div>Sono un blocco inline!
</div>Sono un blocco inline!
</div>Sono un blocco inline!
</div>Sono un blocco inline!
</div>Sono un blocco inline!
</div>Sono un blocco inline!
</div>Sono un blocco inline!
</div>
In questo caso non ho bisogno di utilizzare clear
. Bene!
Ti toccherà del lavoro extra se vuoi che inline-block
funzioni con IE6 e IE7. Qualche volta qualcuno parla del fatto che inline-block
scatena qualcosa chiamato hasLayout
, ti serve saperlo solo nel caso tu voglia la compatibilità con browser vecchi. Segui il link precedente riguardo il supporto di IE6 e IE7 se sei curioso di saperne di più. Altrimenti, continuiamo.