demo

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之间的边距

编辑2：我对我的问题提出了一个问题。绿色框应自动填充灰色区域（水平方向，垂直边距可以是给定值，如15/20 px）。

http://jsfiddle.net/yfnpv/

Answer 1

<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。要暂停以形成另一行，您可以添加一个清除：两者之间的div。这将清除所有浮动，向左或向右，并移动到下一行。然后你可以重复一遍。

5px边距将在每个较小的div（5px + 5px）之间产生10px的边距。

这只是一个广泛的例子。您可以拥有不同大小的div（您应该使用Google css网格框架），您将学到很多关于如何设置这些系统的知识。它们与我所做的基本相同，但远不止于此。

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

编辑：那么如果你想对整个事物进行居中对齐，你会在CSS中添加容器div

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

我希望这会有所帮助。

Answer 2

很难确切地说出你想要的东西。

如果我理解你的话就是这样。

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，但我无法完全记住。

使用具有自动边距（CSS）的div填充div

2 个答案:

demo