内联块元素和垂直对齐推理 [英] Inline-block elements and vertical-align reasoning

问题描述

我有两个div框，它们彼此相邻，使用显示：inline-block。

I have 2 div boxes next to each other using display: inline-block.

没有内容的两个inline-block div都垂直对齐到顶部。

Without content both inline-block divs are vertically aligned to top.

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

If both have content they also vertically align to top.

如果其中只有一个具有文本内容，则

If only one of them has text content then the div box that has text content is vertically aligned to bottom while the one wihtout any text content remains vertically aligned to top.

如果一个框具有纯文本内容，而另一个框则具有纯文本内容，则该div框将垂直对齐到底部，而没有任何文本内容将垂直对齐到顶部。有例如输入字段或标题标签，则只有文本内容的框仅向下移动（可能为2或3px），而带有输入或标题标签的框则位于顶部。

If one box has plain text content and the other has e.g. an input field or a header tag then the box with only text content moves down only slighly (maybe 2 or 3px) while the one with the input or header tag stays on top.

请参见下面的jsfiddle链接

Please see jsfiddle link below

为什么创建者这样做而不是始终将它们放在顶部？

Why did the creators do this instead of always aligning them to top? Is there a deeper reason behind this?

推荐答案

更新：

在您的示例中，只需添加：

In your example just add:

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

小提琴：

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

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

You have to set vertical-align:top; to each element is display:inline-block;. Careful not to confuse: it is the element, NOT the parent.

示例：

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

演示：

http://jsfiddle.net/X3RLB/

意识到在内嵌块元素之间会出现不必要的空格。不能使用 margin：0px; 属性删除该空间。要删除它们，必须在 inline-block 元素之间添加注释标签。

Realize that an unwanted space appears between your inline-block elements. This space CANNOT be removed with the margin:0px; property. To remove them you must add a comment tag between inline-block the elements.

示例：

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

提琴：

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

这篇关于内联块元素和垂直对齐推理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！