Aligner la DIV inline-block sur le haut de l’élément conteneur

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.