如何将一个 div 对齐到其父节点的顶部，同时保持其内联块行为？

问: 如何使 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 元素自动调整到内容宽度，同时居中之前给出的答案

css
html

303314 次浏览

小开

尝试使用 vertical-align CSS 属性。

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

把它也应用到 #box3上。

小开

对于您想要放在顶部的元素，使用竖直对齐: top; 正如我在 jsfiddle 中演示的那样。

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

小开

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

作为一个额外的奖励，这里有一个增强的分叉小提琴，使其在 Internet Explorer 6和 Internet Explorer 7上也能工作;)

例子: 给你

小开

可以为每个框(box1、 box2、 box3)添加 float: left。

Http://jsfiddle.net/wa4ma/

小开

或者您可以直接向 div 添加一些内容并使用 inline-table