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> 

的问题是，边距：10px的;在右边也推下了左边。 我在这里错过了什么？这是预期的吗？ 我想调整左，右两侧分别顶边距属性

Answer 1

有一些事情可以做。正在发生的事情是，正确的div的边距正在影响包含div的位置，这是推动左边的div的位置。我相信这是预期的行为。所有这些都可以工作：

1. 将包含div来float: left
2. 计数器，由要么设置上包含分区或左侧DIV一个-10px余量行动的权利股利。

Answer 2

尝试浮动在div包裹的两列，并在右侧的div

Answer 3

这就是所谓的保证金崩溃，而实际发生的事情是，因为外部div（width:200px）是空的，它需要它的孩子的边际，并使用它而不是孩子..所以容器被推下10px，并且由于左/右div在它内部，它们也移动。

“表达式崩溃余量 意味着相邻（不是 非空内容，填充或边框 区域或清除它们分开） 两个或多个框（它可能是下一个 彼此或嵌套）结合到 形成一个单一的余量。

如果你给它一个边界，你会看到它的工作如预期.. demo