HTML / CSS：具有百分比宽度+填充和浮动的Div

Question

我遇到了问题，我猜有一个常见的解决方案，但我不知道如何正确搜索它。 我希望2 div互相浮动，每个宽度都占50％。现在我想给他们每个人一些填充。会发生什么，他们环绕，而不是彼此相邻显示，因为他们现在大于50％。什么是黑客？

一些代码：

    #nw_main_line1_l {
      height: 512px;
      width: 50%;
      float: left;
      padding-right: 11px;
      background-color: red;
    }
    #nw_main_line1_r {
      height: 512px;
      width: 50%;
      float: left;
      padding-left: 11px;
      background-color: green;
    }

这里发生的是绿色低于红色。如果我删除填充，一切都很好，它们像例外一样浮动。

亲切的问候：）

Answer 1

这是由于填充。您可以减小宽度或使用现代方式：

* { box-sizing: border-box; }

更多信息on box-sizing here.

Answer 2

你基本上自己找到了问题的答案，但没有明确指出它。 删除填充可以解决问题。如果你将填充边界交换（或使用两者），你会发现盒子再次被打破。

这是因为至少在Firefox的盒子模型中产生的盒子宽度（例如div）将是

2 * [Border-Width] + 2 * [Padding-Width] + width

也许您可以使用CSS3 flexible boxes来方便地解决您的问题。