如何将div与其父对象的顶部对齐，但保持其内联代码块行为？

请参阅：http：//jsfiddle.net/b2BpB/1/

问：如何使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并使用内联表