按宽度百分比设置多个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的宽度来调整它。然后它们将出现在单行中