1

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

这是一个显示问题的 JSFiddle：

http://jsfiddle.net/uQcGS/1/

或者这里的代码：

<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;
}

目前，边距导致它们跨越两条线。

我发现了一些针对类似问题的技巧，但我不确定如何将它们应用于我的特定问题。

4

5 回答 5

5

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

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

于 2013-06-05T16:58:52.720 回答
1

您可以将所有<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>这些空白字符会导致元素之间产生额外的空间。

于 2013-06-05T16:58:41.930 回答
1

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

将您的 CSS 更改为：

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

jsFiddle 示例

于 2013-06-05T17:00:15.297 回答
0

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

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

  1. 删除display: inline-block;并改用float:left（使用浮动更好，你只需要很好地理解它）
  2. 稍微减小宽度（我建议 16%）并在边距中使用百分比（我建议 1%）
  3. 总是在使用后float不要忘记将 div 与样式clear:both
于 2013-06-05T17:02:37.610 回答
0

这应该有效：

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

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

于 2013-06-05T17:05:54.130 回答