inline-block

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.

Il Modo Difficile (usando float)

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

<div class="box">

Sto flottando!

</div>
<div class="box">

Sto flottando!

</div>
<div class="box">

Sto flottando!

</div>
<div class="box">

Sto flottando!

</div>
<div class="box">

Sto flottando!

</div>
<div class="box">

Sto flottando!

</div>
<div class="box">

Sto flottando!

</div>
<div class="box">

Sto flottando!

</div>
<div class="box">

Sto flottando!

</div>
<div class="box">

Sto flottando!

</div>
<div class="box">

Sto flottando!

</div>
<div class="after-box">

Sto usando clear così non mi dispongo di fianco ai box qui sopra.

</div>

Il Modo Facile (usando inline-block)

Puoi ottenere lo stesso effetto utilizzando il valore inline-block della proprietà display.

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

<div class="box2">

Sono un blocco inline!

</div>
<div class="box2">

Sono un blocco inline!

</div>
<div class="box2">

Sono un blocco inline!

</div>
<div class="box2">

Sono un blocco inline!

</div>
<div class="box2">

Sono un blocco inline!

</div>
<div class="box2">

Sono un blocco inline!

</div>
<div class="box2">

Sono un blocco inline!

</div>
<div class="box2">

Sono un blocco inline!

</div>
<div class="box2">

Sono un blocco inline!

</div>
<div class="box2">

Sono un blocco inline!

</div>
<div>

In questo caso non ho bisogno di utilizzare clear. Bene!

</div>

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.

  • Creative Commons License