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

Question

请参阅: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;
}

非常感谢...

致谢:这个问题来自之前由/sf/users/1440491/给出的答案 :获取CSS元素以自动调整内容宽度,同时居中

Answer 1

试试vertical-alignCSS属性.

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

也适用它#box3.

Answer 2

正如其他人所说,vertical-align: top是你的朋友.

作为奖励,这里是一个分叉的小提琴,增加了增强功能,使其在Internet Explorer 6和Internet Explorer 7中也可以使用;)

示例:这里

Answer 3

使用vertical-align:top; 对于你想要在顶部的元素,正如我在你的jsfiddle上所展示的那样.

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

Answer 4

你可以添加float:left; 对于每个框(box1,box2,box3).

http://jsfiddle.net/Wa4ma/