Comment aligner une div sur le haut de son parent mais en gardant son comportement de blocage en ligne?

Voir: http://jsfiddle.net/b2BpB/1/

Q: Comment pouvez-vous aligner box1 et box3 en haut du div div boxContainer ?

 #boxContainerContainer { background: #fdd; text-align: center; } #boxContainer { display: inline-block; border: thick dotted #060; margin: 0px auto 10px auto; text-align: left; } #box1 { width: 50px; height: 50px; background: #999; display: inline-block; } #box2 { width: 50px; height: 100px; background: #999; display: inline-block; } #box3 { width: 50px; height: 50px; background: #999; display: inline-block; } 

Aide beaucoup apprécié …

Remerciements: cette question est issue d’une réponse donnée précédemment par https://stackoverflow.com/users/20578/paul-d-waite : amener un élément CSS à redimensionner automatiquement en largeur de contenu, tout en étant centré

Essayez la propriété CSS vertical-align .

 #box1 { width: 50px; height: 50px; background: #999; display: inline-block; vertical-align: top; /* here */ } 

Appliquez-le aussi à #box3 .

Comme d’autres l’ont dit, vertical-align: top est votre ami.

En prime, il y a un violon fourchu avec des améliorations supplémentaires qui le font fonctionner dans Internet Explorer 6 et Internet Explorer 7)

Exemple: ici

Utilisez vertical-align: top; pour l’élément que vous voulez en haut, comme je l’ai démontré sur votre jsfiddle.

http://www.brunildo.org/test/inline-block.html

Vous pouvez append un flottant: à gauche; pour chacune des cases (case 1, case 2, case 3).

http://jsfiddle.net/Wa4ma/

Ou vous pouvez simplement append du contenu au div et utiliser inline-table