兩欄佈局 - 集裝箱

Question

我有一個兩個欄佈局最大寬度：http://jsfiddle.net/KqQ42/1/

現在我想的是，左，右列都共享的最大寬度，因此現在存在page_wrapper與列之間的空間。

當我只增加一個百分比的寬度，他們不是並排的了。

那麼有什麼竅門？

Answer 1

這樣寫：

.content_wrapper > div 
{ 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
} 
.nav{ 
width:25%; 
} 

入住這http://jsfiddle.net/KqQ42/7/

Answer 2

你的問題在這裏是你在兩列上聲明的1px邊界。瀏覽器的盒子模型將邊框和你聲明的寬度相加，如果刪除邊框聲明並將寬度設置爲100％，則不會有任何問題

或者可以使用css物業box-sizing: border-box;http://paulirish.com/2012/box-sizing-border-box-ftw/

你也可以只finx CSS的方法來清除浮動元素：

http://css-tricks.com/snippets/css/clear-fix/

，而不是使用一個額外的div在您的標記這樣做