具有百分比宽度的均匀空间 div？答案

【问题标题】：Evenly space divs with percentage width?具有百分比宽度的均匀空间 div？
【发布时间】：2013-06-05 16:56:10
【问题描述】：

我希望六个百分比宽度的 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，但我不确定如何将它们应用于我的具体问题。

【问题讨论】：

标签： css css-float

【解决方案1】：

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

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

【讨论】：

+1 以获得更多信息和指向相关 W3C 规范的指针。
谢谢，但这个问题实际上还有很多问题（我已经对其进行了编辑以澄清）。如果你让容器变窄，比如 100 像素或更小，那么 div 会再次中断 - 大概是因为边距占据了宽度的 4% (100-(16*6)%) 以上。
啊 - 将边距更改为 0.3% 可以解决该问题。谢谢！
当你把页面缩小到足够小的时候，它仍然会乱七八糟！

【解决方案2】：

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

<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> 元素之间产生额外的空格。

【讨论】：

【解决方案3】：

您的边距，加上元素的宽度和它们之间的空白总计超过 100%，这导致了中断。浮动它们以删除空间，并调整您的计算，使总数不大于 100%。

将您的 CSS 更改为：

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

jsFiddle example

【讨论】：

【解决方案4】：

这应该可行：

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

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

【讨论】：

【解决方案5】：

我已经更新了你的代码请检查它JSFIDDLE

您只需 3 个步骤：

去掉display: inline-block;，改用float:left（用float更好，你只需要好好理解）
将宽度稍微减小一点（我建议 16%）并在边距中使用百分比（我建议 1%）
总是在使用float 之后不要忘记将 div 与样式clear:both

【讨论】：