Comment aligner un div sur le haut de son parent tout en conservant son comportement de bloc en ligne?

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

Q: Comment pouvez-vous aligner box1 et box3 sur le haut du div parent 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 très appréciée ...

Remerciements: Cette question est dérivée d'une réponse précédemment donnée par https://stackoverflow.com/users/20578/paul-d-waite : Obtenir un élément CSS pour redimensionner automatiquement à la largeur du contenu, et en même temps être centré

Essayez la vertical-alignpropriété CSS.

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

Appliquez-le #box3aussi.

Comme d'autres l'ont dit, vertical-align: topc'est votre ami.

En prime, voici un violon fourchu avec des améliorations supplémentaires qui le permettent également de 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 ajouter float: left; pour chacune des cases (case1, case2, case3).

http://jsfiddle.net/Wa4ma/

Ou vous pouvez simplement ajouter du contenu au div et utiliser une table en ligne