Question

我正在尝试创建一个网页，其中两个div部分水平显示在彼此旁边。在其中一个中，我想附加随时间变化的内容。我注意到如果我使用css display：inline-block来对齐两个div部分然后我使用append（）在第一部分中插入一个段落，第二个部分被下推以与段落块对齐。我知道我可以通过使用float：left来解决这个问题，但我仍然不明白为什么内联块表现那样。我想知道是否有办法使内联块工作，以防我真的需要使用它而不是浮点数。这是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的原因是

jquery append（）与css display的奇怪交互：inline-block

1 个答案: