inline-block

Vous pouvez créer une grille de boites qui s'adaptent à la largeur du navigateur et s'agencent plutôt bien. C'est possible depuis longtemps en utilisant float, mais maintenant avec inline-block c'est encore plus facile. Regardons des exemples pour chaque approche.

La manière difficile (avec float)

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

<div class="box">

Je flotte !

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

Je flotte !

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

Je flotte !

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

Je flotte !

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

Je flotte !

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

Je flotte !

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

Je flotte !

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

Je flotte !

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

Je flotte !

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

Je flotte !

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

Je flotte !

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

J'utilise clear pour ne pas flotter à coté des boites au dessus.

</div>

La manière facile (avec inline-block)

Vous pouvez avoir le même effet en utilisant la valeur inline-block de la propriété display.

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

<div class="box2">

Je suis inline-block!

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

Je suis inline-block!

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

Je suis inline-block!

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

Je suis inline-block!

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

Je suis inline-block!

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

Je suis inline-block!

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

Je suis inline-block!

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

Je suis inline-block!

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

Je suis inline-block!

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

Je suis inline-block!

</div>
<div>

Je n'ai pas besoin d'utiliser clear. Cool !

</div>

Vous avez un peu plus de travail à faire pour que IE6 et IE7 supportent inline-block. Parfois les gens disent que inline-block déclenche quelque chose appellé hasLayout, mais vous n'avez besoin de savoir ça que pour les vieux navigateurs. Suivez le lien précédant à propos d'IE6 et IE7 si vous êtes curieux d'en apprendre plus. Sinon, continuons.

  • Creative Commons License
  • Ads by Bocoup