html - 行内 block 元素和垂直对齐推理

Question

我使用 display: inline-block 有 2 个相邻的 div 框。

在没有内容的情况下，两个内联 block div 都垂直对齐到顶部。

如果两者都有内容，它们也会垂直对齐到顶部。

如果其中只有一个有文本内容，则有文本内容的 div 框垂直底部对齐，而没有任何文本内容的 div 框保持垂直顶部对齐。

如果一个框包含纯文本内容，而另一个框包含例如输入字段或标题标签然后只有文本内容的框仅略微向下移动(可能 2 或 3px)，而带有输入或标题标签的框保持在顶部。

请查看下面的 jsfiddle 链接

为什么创作者这样做而不是始终将它们对齐到顶部？这背后是否有更深层次的原因？

Answer 1

更新:

在您的示例中只需添加:

.content_boxes{
    width: 400px;
    height: 200px;
    background: lightgreen;
    display: inline-block;
    vertical-align:top;
}

fiddle :

http://jsfiddle.net/genwQ/1/

您必须为每个元素设置 vertical-align:top; 是 display:inline-block;。注意不要混淆:它是元素，而不是父元素。

例子:

ul li {
    display:inline-block;
    vertical-align:top;
}

演示:

http://jsfiddle.net/X3RLB/

意识到您的 inline-block 元素之间出现了不需要的空格。不能使用 margin:0px; 属性删除此空格。要删除它们，您必须在 inline-block 元素之间添加注释标记。

例子:

<div id="content_cnt">
    <div class="content_boxes"></div><!--
    --><div class="content_boxes">dsasda</div>
</div>

fiddle :

http://jsfiddle.net/genwQ/2/