CSS3需要幫助理解箱上漿

Question

我發現從該網站如下：http://www.htmlgoodies.com/html5/tutorials/learn-css3-from-a-z-getting-started-with-layouts-.html#fbid=Byc3E58e8v-

「這樣做的CSS3代碼非常簡單，你只需要添加以下屬性來切換模式爲特定的元素。

#W3C-model { 
box-sizing: content-box; 
} 

#traditional-model { 
box-sizing: border-box; 
} 

已經瞭解如何箱大小的作品，接下來的問題是在哪裏可以使用它嗎？那麼，它是非常有用的，當你有兩個相等的列。如果你給他們50％的寬度每增加一些填充，也可能是邊框，列不會並排顯示。這是一個理想的場景，您可以將框的大小設置爲邊框並愉快地設置兩個盒子的寬度爲50％。「

我不確定列的意思是不會並排顯示的？這聽起來像是兩列之間的分界線會消失或類似的東西 - 我不確定。我有這樣的示例代碼進行實驗：

http://jsfiddle.net/hE8UZ/

我沒有看到任何效果可言。除了不知道爲什麼跨度元素沒有佔用250像素，因爲寬度被稱爲身體的50％。

請幫忙。

感謝

Answer 1

如果你有500像素的寬度和孩子1px的邊框，10px的填充，寬度爲100％和集箱上漿到邊界框，然後，寬度爲500像素，如果你設置任何容器盒上漿到內容框，那麼寬度將是500px + 2x10px + 2x1px = 522px。

.container { 
    display: block; 
    width: 500px; 
} 

.one { 
    display: block; 
    padding: 10px; 
    -webkit-box-sizing: border-box; 
    width: 50%; 
    border: 1px solid; 
} 

.two { 
    display: block; 
    padding: 10px; 
    -webkit-box-sizing: content-box; 
    width: 50%; 
    border: 1px solid; 
} 

http://jsfiddle.net/Vaj5x/

編輯：

如果你想有拖列添加他們漂浮到左。像這裏一樣http://codepen.io/Chovanec/pen/cuBpg