0

我正在尝试制作相同大小的 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 像素。

提前谢谢你,丹尼尔。

4

3 回答 3

0

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

于 2013-02-11T15:44:08.157 回答
0

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

于 2013-02-11T14:25:36.153 回答
-1

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

div{
    margin: 0px 12.5px;
}

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

于 2013-02-11T14:03:49.543 回答