Question

如果在具有固定宽度的父div中彼此相邻的多个div并且子divs宽度设置为固定父级的百分比，则有时子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

从child中删除属性border。因为它会增加子项的宽度。同时向孩子添加margin:0;padding:0;。如果您添加margin padding，则会增加子项的大小。如果需要边框，它可以分配额外的边框

，减少％宽度

jsfiddle link

Answer 2

这是因为子div的总宽度大于100％且其边界是额外的。通过减少div的宽度来调整它。然后它们将出现在单行

中

按宽度百分比设置多个div，以填充彼此相邻的父div

2 个答案: