Imparare l'impaginazione con i CSS
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.
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
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.
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}
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.
