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

Question

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

因此，对于预期的已经回复的帖子表示歉意。

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

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

一种尝试是在容器上设置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，但我记不太清了。

Answer 2

<div id="container">
   <div class="1column first">one column</div>
   <div class="1column">one column</div>
   <div class="1column">one column</div>
   <div class="1column last">one column</div>
<div class="clear"></div>
   <div class="1column first">one column</div>
   <div class="1column">one column</div>
   <div class="1column">one column</div>
   <div class="1column last">one column</div>
</div> <!-- container -->

CSS

#container {width: 630px;}
.1column {width: 150px; float: left; margin-left: 5px; margin-right: 5px;}
.first {margin-left: 0px;} 
.last {margin-right: 0px;}
.clear {clear:both;}

为了确保一切都合适，您必须添加较小 div 的宽度 + 其边距值以获得总 div 值，然后将其添加到其他值。 所以对于第一个 div，它的总宽度应该是 155px (150px + 5px)，下一个应该是 160px (150px + 5px + 5px)。所以如果你有第一个和最后一个 div 的 155px 和另外两个 div 的 160px，你的总宽度现在应该是 630px。 要中断以形成另一行，您可以在两者之间添加一个 clear:both div。这将清除所有浮动，左或右，并移动到下一行。然后你可以重复。

5px 的边距将使每个较小的 div (5px + 5px) 之间的边距为 10px。

这只是一个广泛的例子。你可以有不同大小的 div（你应该谷歌 css 网格框架），你会学到很多关于这些系统是如何设置的。它们与我所做的基本相同，但比这更进一步。

无论你做什么，只要确保内部 div 不会超出“容器”div 的宽度，否则你会遇到问题。请记住，内边距 + 边距 + 宽度 + 边框 = 总宽度。所以即使给任何 div 添加一个简单的 1px 边框也会自动增加 2px（左边 1px 右边 1px）。

编辑：如果你想将整个东西居中对齐，你可以在 CSS 中添加到容器 div 中

#container {width: 630px; margin-left: auto; margin-right: auto;}

我希望这会有所帮助。