CSS 浮动和折叠空白答案

【问题标题】：CSS Floats & Collapsing White SpaceCSS 浮动和折叠空白
【发布时间】：2010-12-20 02:03:10
【问题描述】：

我有一个由数据库生成的页面。它为每个条目创建一个 DIV（为了一个问题而极其简化）。这些 DIV 中的每一个都有一个固定的宽度，并且向左浮动。

但是，这些 DIV 没有设定高度，因此有时会出现如下图所示的情况。有没有防止这种情况发生的好方法，而空白只是“崩溃”？

原型网站的链接。 Here

【问题讨论】：

标签： css

【解决方案1】：

【讨论】：

【解决方案2】：

根据您可以控制的内容，您始终可以将 clear: left; 添加到 2 列方案中的每个其他元素。

不过，我相信第二个“The Postal Shoppe”实际上会在左侧，而 Brynwood Pak N Ship 会在右侧。

问题不在于“Brynwood Pak N Ship”没有折叠空白，而在于第二个“The Postal Shoppe”被挂断，试图一直移动到左栏“Express Pack & Mail Center”的右下角。

设置clear: left 将确保这些条目总是向下移动足够远以“吸”到其父容器的左边缘。但是您仍然会看到使用该属性的一些不均匀性； “Brynwood Pak N Ship”将与新清理的“Postal Shoppe”对齐，顶部有一个微小的间隙。仍然可能比目前正在发生的事情更可取。

【讨论】：

【解决方案3】：

您可以将clear: left 属性添加到其他每个 div。或者，您可以尝试使用display: inline-block 而不是向左浮动，但它并没有得到广泛的支持（我认为它在 IE 6 或更早版本中中断），因此您必须看看有哪些黑客可以使其普遍工作。

【讨论】：

我在示例代码中尝试了display:inline-block，但它仍然会导致一些差距，尽管它们通常看起来更小且不那么难看。
啊，我明白了。听起来您真正想要做的是 2 列，其中顺序无关紧要，并且 div 不需要彼此垂直对齐。不幸的是，这有点棘手。您可以创建两个 div，每列一个，但是您必须拆分您的框，以便大约一半放在左栏中，其余放在右栏中。

【解决方案4】：

我建议给每个盒子一个相同的高度。这在视觉上更好，它可以一次性解决您的问题！

【讨论】：

【解决方案5】：

我认为这在 CSS 中很难解决。我喜欢其他用户使用“display:inline-block”提出的建议并将高度设置为固定值。它们都有一些小缺点，但情况会比现在好。

如果您要“正确地”解决这个问题，我们首先需要就正确的解决方案达成一致。我认为应该有两列，并且对于必须添加的每个元素，它都附加到当前最少满列的末尾。这不一定会导致元素交替放置在第 1 列和第 2 列中。例如，有时会将两个（或更多）小元素放置在第 2 列中以补偿第 1 列中的大元素。

我怀疑在 CSS 中可以定义这么复杂的东西（但我对以前可以做的事情感到惊讶）。不过，它可以使用 Javascript 来完成。如果使用纯 CSS 解决方案禁用 Javascript，您可以有一个做得相当好的解决方案，如果启用 Javascript，您可以更优雅地安排它们。

我不确定是否值得为此付出努力。现有的一些建议似乎是合理的妥协，如果是我，我可能会选择 inline-block 解决方案，但我想我还是会放弃这个想法。

【讨论】：

【解决方案6】：

现在可以使用 flex-direction 和 column-count 解决这个问题：

.parent {
    column-count: 2;
    column-gap: 1.25rem;
}
.child-class {
    flex-direction: column;
    display: inline-block;
    width: 100%;
}

我不确定是否所有浏览器都支持它，但它是一个简单的 css 解决方案。

【讨论】：