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方便地繞過您的問題。