如何将divalignment到父级的顶部，但保持其行内块行为？

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

问：你如何使box1和box3alignment到父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元素自动调整为内容宽度，同时居中

Answer 1

尝试vertical-align CSS属性。

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

将其应用于#box3 。

Answer 2

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

作为一个奖金在这里分叉小提琴增加了，使其在IE6 / 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/

Answer 5

或者你可以添加一些内容到div并使用内联表