divをその親の上部に配置し、インラインブロックの動作を維持する方法は？

見る： http //jsfiddle.net/b2BpB/1/

Q：box1とbox3を親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;
}

どうぞよろしくお願いします...

謝辞：この質問は、以前にhttps://stackoverflow.com/users/20578/paul-d-waite：CSS 要素を取得してコンテンツの幅に合わせて自動的にサイズ変更すると同時に、中央に配置される回答から分岐しています 。

vertical-alignCSSプロパティを試してください。

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

それに#box3も適用します。

他の人が言ったように、 vertical-align: topあなたの友達です。

おまけとして、ここにInternet Explorer 6とInternet Explorer 7でも機能するように拡張されたフォークフィドルがあります;）

例：ここ

vertical-align：topを使用します。私があなたのjsfiddleで示したように、あなたが一番上に望む要素のために。

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

float：leftを追加できます。各ボックス（box1、box2、box3）。

http://jsfiddle.net/Wa4ma/

または、divにコンテンツを追加して、インラインテーブルを使用することもできます。