185
Mise en page
width: 250px;
margin-left: 20px;
float: left;
display: inline;
padding: 20px;
background: #89ac10 url(/img/top.gif) no-repeat left top;
}
Comme.vous.pouvez.le.voir.à.la.Figure 8.20,.on.obtient.ainsi.trois.colonnes.de.hauteurs.
inégales..
Figure 8.20
Les trois colonnes avant l’application de la technique principale.
L’astuce.de.cette.technique.est.de.donner.à.chaque.boîte.une.grande.quantité.de.remplissage.inférieur.puis.à.supprimer.cette.hauteur.en.excès.à.l’aide.d’une.valeur.égale.de.marge.
négative.. Chaque. colonne. se. trouve. ainsi. forcée. de. déborder. l’élément. conteneur. (voir.
Figure 8.21)..Si.vous.attribuez.ensuite.la.valeur.hidden.à.la.propriété.overflow.du.conteneur,.les.colonnes.sont.tronquées.au.niveau.de.leur.plus.grande.longueur..Dans.cet.exemple,.
je.donne.à.chaque.élément.un.remplissage.inférieur.de.520 pixels.et.une.marge.inférieure.
de.500 pixels..Les.20 pixels.de.différence.forment.le.remplissage.visible.en.bas.de.chaque.
boîte..
.wrapper {
width: 100%;
overflow: hidden;
}
.box {
width: 250px;
padding-left: 20px;