HTML/CSS：百分比宽度+填充和浮动

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方便地绕过您的问题。