css - div之间的灵活距离

Question

我正在尝试制作相同大小的 div 列表。我需要这样做。我将 div 与左浮动对齐，假设 5 个 div 在 1 行中有空间，第 6 个 div 将在其下方。现在我需要做的是从这 5 个 div 中剩余的额外空间，应该在这 5 个 div 之间平均分配。

假设每个 div 有 200px 并且屏幕有 1100px 宽度。现在 5 个 div 之间必须有 25px。200 像素 + 25 像素 + 200 像素 + 25 像素 + 200 像素 + 25 像素 + 200 像素 + 25 像素 + 200 像素。

提前谢谢你，丹尼尔。

Answer 1

我尝试的是您的 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 2

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

Answer 3

我个人会尝试给每个 div 一个边距，如下所示：

div{
    margin: 0px 12.5px;
}

这将有望均匀分布所有 div。