css - 用具有自动边距的 div 填充 div (CSS)

Question

我敢打赌这个问题以前被问过好几次了，但我找不到答案。不在这里或谷歌。我想这说明了我的很多前端(和搜索？-)技能。

因此，对于预期已经回答的帖子，我们深表歉意。

我的问题是我有一个 980 像素的 div，我想用其他较小的 div 填充它。假设较小的 div 为 180 像素宽，而我有 7 个。然后它应该是 2 行小 div，它们之间有 20 个像素，第一行应该是 5，下一行应该是 2。

一种方法是将它们设置为 float: left 并有一个 margin-left: 20px。这将如何以 1000px(20 到宽)的总行结束，这将导致第一行有 4 个 div，第二行有 3 个 div。

一个尝试是在容器上设置一个 margin-right:-20px，但它确实(不是那么意外)不起作用。

欢迎提供任何帮助或答案链接!

编辑: 我意识到我的问题不是很清楚。容器也可以重新定位，因此较小的 div 应该只填充容器中的空间，第一个在行中距左侧 0px，最后一个在行中距右侧 0px。中间的 div 应该自动调整。我只为一排问题找到了这样的东西。如果较小的 div 之间的边距 < 1 像素，那么我也更喜欢它打破行直到下一行。

编辑 2: 我对我的问题做了一个 jsfiddle。绿色框应自动填充灰色区域(水平方向，垂直边距可以是给定值，如 15/20 像素)。

http://jsfiddle.net/yfnpv/

Answer 1

很难准确地说出你想要什么。

如果我没理解错的话，就是这个。

demo

我添加了一些辅助元素:

    ....
    <div class="obj">7</div>
    <div class="obj push"></div>
    <div class="obj push"></div>
    <div class="pushend"></div>
</div>

CSS 是:

#container {
    max-width: 980px;
    background-color: gray;
    display: inline-block;
    text-align: justify;
}

.obj {
    width: 180px;
    height: 180px;
    background-color: green;
    display: inline-block;
}
.obj.push {
    height: 0px
}
.pushend {
    width: 100%;
    height: 0px;
    display: inline-block;
}

这个想法不是我的，但我找不到我看到它的地方。

我相信原作者也使用了一些伪元素的巧妙技巧，只是为了不改变 HTML，但我记不清了。