div之间的灵活距离答案

【问题标题】：flexible distance between divsdiv之间的灵活距离
【发布时间】：2012-12-20 16:21:45
【问题描述】：

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

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

提前谢谢你，丹尼尔。

【问题讨论】：

使用 jQuery，我只能这么说，除了看这个，你能做的不多：twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem
如果您的要求允许您指定现代版本的浏览器，您也许可以使用 CSS3 FlexBox 功能：inserthtml.com/2012/05/…

标签： css html

【解决方案1】：

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

【讨论】：

【解决方案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。

【讨论】：

【解决方案3】：

我个人会尝试为每个 div 设置如下边距：

div{
    margin: 0px 12.5px;
}

这有望均匀分布所有 div。

【讨论】：

OP 给出的1100px 屏幕宽度只是一个例子。间距应取自实际可用的屏幕宽度。
不能分割像素！！ && 0（零）不需要单位（0桶水等于0K金）
我明白你的观点，即如果你需要一个 css 来满足所有目的，OP 只使用一个示例，但我误读了它并仅针对示例解决了。至于无法分割像素，您仍然可以使用 0.5px，它会自动将 13px 分配给一侧，将 12px 分配给另一侧，因此加起来会产生 25px 的间隙。