Leer CSS Layout
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.
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
Ik ben aan het float'en!
</div>Ik ben aan het float'en!
</div>Ik ben aan het float'en!
</div>Ik ben aan het float'en!
</div>Ik ben aan het float'en!
</div>Ik ben aan het float'en!
</div>Ik ben aan het float'en!
</div>Ik ben aan het float'en!
</div>Ik ben aan het float'en!
</div>Ik ben aan het float'en!
</div>Ik ben aan het float'en!
</div>Ik maak gebruik van clear zodat ik niet float naast bovenstaande boxen.
</div>
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;
}
Ik ben een inline block!
</div>Ik ben een inline block!
</div>Ik ben een inline block!
</div>Ik ben een inline block!
</div>Ik ben een inline block!
</div>Ik ben een inline block!
</div>Ik ben een inline block!
</div>Ik ben een inline block!
</div>Ik ben een inline block!
</div>Ik ben een inline block!
</div>
Ik hoef de clear niet te gebruiken in deze situatie. Nice!
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.
