Apprendre les mises en page CSS
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.
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
Je flotte !
</div>Je flotte !
</div>Je flotte !
</div>Je flotte !
</div>Je flotte !
</div>Je flotte !
</div>Je flotte !
</div>Je flotte !
</div>Je flotte !
</div>Je flotte !
</div>Je flotte !
</div>J'utilise clear pour ne pas flotter à coté des boites au dessus.
</div>
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;
}
Je suis inline-block!
</div>Je suis inline-block!
</div>Je suis inline-block!
</div>Je suis inline-block!
</div>Je suis inline-block!
</div>Je suis inline-block!
</div>Je suis inline-block!
</div>Je suis inline-block!
</div>Je suis inline-block!
</div>Je suis inline-block!
</div>
Je n'ai pas besoin d'utiliser clear. Cool !
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.
