HTML/CSS - 2 列布局，右侧上边距也会影响左侧

Question

这是我的简单标记:

<div style="width:200px">
    <div style="width:50%;float:left;">
        left side
    </div>
    <div style="margin-left:50%;width:50%;margin-top:10px;">
        right side
    </div>
</div>

问题是 margin-top:10px;右侧也向下推左侧。 我在这里错过了什么？这是预期的吗？ 我想独立调整左右两侧的top-margin属性

Answer 1

您可以做一些事情。发生的事情是右侧 div 的边距影响了两者的包含 div 的位置，这就是将左侧推向下方的原因。我相信这是预期的行为。这些中的任何一个都可以工作:

1. 将包含的 div 设置为 float: left
2. 通过在包含的 div 或左侧的 div 上设置 -10 像素的边距来对抗右侧的 div。