Question

我希望六个百分比宽度的div沿100％宽度div均匀分布，填满整个100％宽度，但它们之间的间距很小。

这是一个显示问题的JSFiddle：

或代码在这里：

<div class="container">
    <div class="inner red">&nbsp;</div>
    <div class="inner orange">&nbsp;</div>
    <div class="inner yellow">&nbsp;</div>
    <div class="inner green">&nbsp;</div>
    <div class="inner blue">&nbsp;</div>
    <div class="inner purple">&nbsp;</div>
</div>
div { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}
.container { 
  width: 100%;
}
.inner { 
  width: 16%;  
  display: inline-block;
  margin: 1px;
}

目前，保证金导致他们突破两条线。

我找到了some hacks for similar problems，但我不确定如何将它们应用到我的具体问题中。

Answer 1

inline formatting context中的元素会导致HTML中的空格或回车引起的小水平“边距”。通过删除空格，您将删除边距。还有一些其他techniques可以克服此行为，其中一个只是使用float而不是

http://jsfiddle.net/uQcGS/9/

Answer 2

您可以将所有<div>放在一行中，中间没有任何空白字符。

<div class="container">
    <div class="inner red">&nbsp;</div><div class="inner orange">&nbsp;</div><div class="inner yellow">&nbsp;</div><div class="inner green">&nbsp;</div><div class="inner blue">&nbsp;</div><div class="inner purple">&nbsp;</div>
    <!-- Plus arbitrarily many more boxes... -->
</div>

这些空白字符会导致<div>元素之间的空间和空间。

Answer 3

您的保证金，加上元素的宽度和它们之间的空白总计超过100％，这导致了中断。浮动它们以移除空间，并调整计算以使总计不超过100％。

将CSS更改为：

.inner {
    width: 14%;
    display: inline-block;
    margin: 1%;
    float:left;
}

<强> jsFiddle example

Answer 4

我已更新您的代码，请仔细检查 JSFIDDLE

您需要做的只是3个步骤：

删除display: inline-block;并改为使用float:left（使用float更好，你只需要理解它就好了）
稍微减少宽度（我建议16％）并使用保证金百分比（我建议1％）

float

始终不要忘记将div添加到样式clear:both

Answer 5

这应该有效：

.inner {
    width: 15%;
    display: inline-block;
    margin-right: 2%;
    float:left;
}
.inner:last-child {
    margin-right: 0;
}

http://jsfiddle.net/pulleasy/uQcGS/7/

均匀空间divs的百分比宽度？

5 个答案: