Lorsque deux div
inline-block
ont des hauteurs différentes, pourquoi le plus court des deux ne s’aligne-t-il pas sur le haut du conteneur? ( DEMO ):
HTML:
CSS:
.container { border: 1px black solid; width: 320px; height: 120px; } .small { display: inline-block; width: 40%; height: 30%; border: 1px black solid; background: aliceblue; } .big { display: inline-block; border: 1px black solid; width: 40%; height: 50%; background: beige; }
Comment puis-je aligner le petit div
en haut de son conteneur?
Parce que l’ vertical-align
est défini par défaut sur la ligne de base .
Utilisez ceci à la place:
.small{ display: inline-block; width: 40%; height: 30%; border: 1px black solid; background: aliceblue; vertical-align:top; }
http://jsfiddle.net/Lighty_46/RHM5L/9/
Ou comme @ f00644 dit que vous pouvez également appliquer un élément float
aux éléments enfants.
Vous devez append une propriété d’ vertical-align
à vos deux enfants div.
Si .small
est toujours plus court, il vous suffit d’appliquer la propriété à .small
. Cependant, si l’une des deux peut être la plus grande, vous devez appliquer la propriété à la fois à .small
et à .big
.
.container{ border: 1px black solid; width: 320px; height: 120px; } .small{ display: inline-block; width: 40%; height: 30%; border: 1px black solid; background: aliceblue; vertical-align: top; } .big { display: inline-block; border: 1px black solid; width: 40%; height: 50%; background: beige; vertical-align: top; }
L’alignement vertical affecte les boîtes en ligne ou les cellules de tableau, et il existe un grand nombre de valeurs différentes pour cette propriété. Veuillez consulter https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align pour plus de détails.
Ajouter un débordement: auto au div du conteneur. http://www.quirksmode.org/css/clearing.html Ce site Web présente quelques options pour résoudre ce problème.