div之间的灵活距离

Question

我正在尝试制作相同大小的div列表。我需要这样做。我将divs与浮动左边对齐，让我们说5个div在1行中有空格，第6个div将在它下面。现在我需要做的是这5个​​div中剩余的额外空间，应该在这5个div之间平均分配。

假设每个div有200px，屏幕宽度为1100px。 5个div现在必须有25px。 200px + 25px + 200px + 25px + 200px + 25px + 200px + 25px + 200px。

先谢谢你，丹尼尔。

Answer 1

您可以在示例中向左浮动一个宽度为25px的空div，或者使用百分比25px为1100将是2％

Answer 2

我尝试的是div的％宽度和边距的％宽度。因为你想要每行5个div，你可以做的最多没有空格或边界是20％。在下面的jsfiddle中，我在左边距设置上使用了17％宽度和2％。您可以自定义第一个div样式，以便在需要时不填充左侧。

.cell {
    height:30%;
    width:17%;
    background:#ff0000;
    border:1px solid black;
    margin-bottom:2em;
    float:left;
    margin-left:2%;
}

http://jsfiddle.net/aKn4n/

在缩小和扩展浏览器窗口时，你几乎可以在第一行保留5个div。

Answer 3

我个人会尝试给每个div一个这样的边距：

div{
    margin: 0px 12.5px;
}

希望能够平均分配所有div。