inline-block

Je kan een raster van boxen maken die de breedte van de browser netjes vult en wrapt wanneer nodig is. Dit is al heel lang mogelijk door gebruik te maken van float, maar nu met inline-block is dit nog eenvoudiger geworden. Laten we eens kijken naar voorbeelden van beide benaderingen.

The Hard Way (met float)

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

<div class="box">

Ik ben aan het float'en!

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

Ik ben aan het float'en!

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

Ik ben aan het float'en!

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

Ik ben aan het float'en!

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

Ik ben aan het float'en!

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

Ik ben aan het float'en!

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

Ik ben aan het float'en!

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

Ik ben aan het float'en!

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

Ik ben aan het float'en!

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

Ik ben aan het float'en!

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

Ik ben aan het float'en!

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

Ik maak gebruik van clear zodat ik niet float naast bovenstaande boxen.

</div>

The Easy Way (met inline-block)

Je kan hetzelfde effect bereiken door de inline-block waarde te zetten op de display property.

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

<div class="box2">

Ik ben een inline block!

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

Ik ben een inline block!

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

Ik ben een inline block!

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

Ik ben een inline block!

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

Ik ben een inline block!

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

Ik ben een inline block!

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

Ik ben een inline block!

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

Ik ben een inline block!

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

Ik ben een inline block!

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

Ik ben een inline block!

</div>
<div>

Ik hoef de clear niet te gebruiken in deze situatie. Nice!

</div>

Je moet wel wat extra werk doen voor IE6 en IE7 support met inline-block. Soms praten mensen over inline-block die hasLayout activeert, maar dit is alleen van toepassing als support voor oudere browsers gewenst is. Bekijk bovenstaande link als je meer wilt weten over IE6 en IE7 support. Anders, laten we vooral doorgaan.

  • Creative Commons License
  • Ads by Bocoup