使框適合容器寬度

Question

我想要做的是使容器內的框自動適應容器寬度。

.container{ 
width: 960px; 
} 

.box{ 
width: 240px; /* 960/4 = 240 */ 
float: left; 
border:1px solid #000; 
} 

是否有另一種方法來做到這一點，而不是分開容器的寬度？

Answer 1

這個怎麼樣的寬度是多少？ http://jsfiddle.net/643FQ/

.container{ 
width: 960px; 
} 

.box{ 
width: 25%; 
height: 50px; 
float: left; 
border:1px solid #000; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 

Answer 2

不，沒有捷徑。

唯一的方法是使用百分比或像現在這樣分割div。並浮動div，以便它們可以堆疊在一行上。

Answer 3

你可以在這裏使用比例：

.box { 
    width: 25%; 
} 

請注意，由於您使用1px你的邊界，這將是2px額外每盒，所以你最後的框不會在1排，疊加另外三個因爲你的.container是960px。

您可以刪除邊框或減少.box寬度的值，或增加您的.container