按寬度百分比設置多個div以填充彼此相鄰的父div

Question

如果您在具有固定寬度的父div中彼此相鄰的多個div並且將子div的寬度設置爲固定父級的百分比，有時子div不能全部在同一行顯示，但子div的寬度百分比總和爲100％。

HTML：

<div id="parent"> 
<div class="child" style="width:51.5%;">1</div> 
<div class="child" style="width:0.58333333333333%;">2</div> 
<div class="child" style="width:21.666666666667%;">3</div> 
<div class="child" style="width:0.56944444444444%;">4</div> 
<div class="child" style="width:15%;">5</div> 
<div class="child" style="width:0.23611111111111%;">6</div> 
<div class="child" style="width:6.7361111111111%;">7</div> 
<div class="child" style="width:0.69444444444444%;">8</div> 
<div class="child" style="width:2.3611111111111%;">9</div> 
<div class="child" style="width:0.47222222222222%;">10</div> 
<div class="child" style="width:0.18055555555556%;">11</div> 
</div> 

CSS：

#parent{ 
float:left; 
width:850px; 
overflow:hidden; 
} 

.child{ 
border:1px solid red; 
float:left; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
background-color:blue; 
white-space: nowrap; 
overflow:hidden; 
} 

http://jsfiddle.net/4gvgqkkc/3/

任何想法？

Answer 1

從孩子中刪除屬性border，因爲它增加了孩子的寬度。 同時加margin:0;padding:0;給孩子。如果你添加margin padding，他們會增加孩子的大小。如果需要的邊界，它可以分配額外的邊界

jsfiddle link

Answer 2

這是因爲孩子的div的總寬度大於100％，它的邊界是附加的減少％的寬度。通過減小div的寬度來調整它。然後它們將出現在單行中