css - DIV 跳到奇数位置

Question

我试图理解为什么

在此示例的第 4 个 DIV 中：

http://jsfiddle.net/WarrickF/884Q9/

我已将以下内容用于内容：

<div class="xxx1">xxx</div><div class="xxx2">yyy</div>

为什么这个 DIV 不再与其他 DIV 对齐？

Answer 1

display: inline-block;如果它没有任何内容，可以产生有趣的效果。这与vertical-align财产有关。

内联块 div 中没有内容（或在这种情况下为浮动内容），它似乎假设它是一个图像，并且垂直对齐默认为vertical-align: baseline;而不是vertical-align: bottom;具有文本内容的内联块元素的默认值。

vertical-align: bottom;您可以通过添加到播放器类轻松解决此问题。