javascript - jquery append() 与 css 显示 :inline-block 的奇怪交互

Question

我正在尝试创建一个网页，其中两个 div 部分水平并排显示。在其中一个中，我想附加会随时间变化的内容。我注意到，如果我使用 css display:inline-block 对齐两个 div 部分，然后我使用 append() 在第一部分中插入一个段落，第二个段落将被向下推以与段落 block 对齐。我知道我可以通过使用 float:left 来解决这个问题，但我仍然不明白为什么 inline-block 会那样做。我想知道是否有一种方法可以使内联 block 工作，以防我真的需要使用它而不是 float 。这是 JsFiddle:Link

<div id="left">left</div>
<div id="right">right</div>

#left, #right{
    background-color:#ff0;
    width: 100px;height: 100px;
    display:inline-block;}

<script>
    $("#left").append("<p>Paragraph</p>");
</script>

Answer 1

当使用 display: inline-block 时，如果您希望元素显示在顶部，则必须添加 vertical-align: top:

JSFIDDLE

inline-block 元素默认设置为 baseline 的原因