jQuery append（）与CSS的怪异互动display：inline-block

Question

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

<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则必须添加vertical-align: top top：

JSFIDDLE

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