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的原因