Question

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

但是，这些DIV没有设定的高度，因此偶尔会出现如图所示的以下内容。有没有一种很好的方法可以防止这种情况发生，而白色空间只是“崩溃了？”

原型网站的链接。 Here

Answer 1

Answer 2

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

尽管如此，我相信第二个“The Postal Shoppe”实际上位于左侧，而Brynwood Pak N Ship将位于右栏。

问题不在于“Brynwood Pak N Ship”没有坍塌白色空间，而是第二个“The Postal Shoppe”被挂起试图一直移动到左侧列“Express Pack＆amp; Mail Center”的右下角。

设置clear: left将确保始终的条目向下移动到足以“吸收”到其父容器的左边缘。但你仍然会看到一些使用该属性的不均匀性; “Brynwood Pak N Ship”将与新推出的“Postal Shoppe”一起排在首位，显示出顶部的微小差距。仍然可能比目前的情况更好。

Answer 3

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

Answer 4

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

Answer 5

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

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

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

我不确定是否值得为此付出努力。一些现有的建议似乎是合理的妥协，如果是我，我可能会采用内联块解决方案，但我认为无论如何我都会抛出这个想法。

Answer 6

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

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

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