如何在画廊风格中实现流畅的宽度，等间距的div？

Question

我正在尝试实现div对齐方案。我对css比较陌生，但我最近一直在深入挖掘它并且调整元素有时令人愤怒，温和地说。

我有一个填充页面的div容器。在这个容器中，有一组固定的宽度/高度div（很多）。它本质上是一个图像库，但图像是div的背景图像，所以如果需要，我可以覆盖其他一些内容。 div是内联块，因此它们从左到右填充父容器，直到div不能适合剩余的可用空间。然后他们继续下一个“行”，依此类推。问题是这会导致（或可能导致）在每行末尾的一大块空白空间中。

我希望每行中的div具有相等的间距，但每行中div的数量应不固定。我希望连续的div数量能够适应不同的屏幕分辨率（或屏幕大小调整），但保持相等的间距。最后一行也可能是一个问题，因为如果div没有填充它，那么我希望每一行都与上面的那一行垂直对齐，而不是拉伸以填充该行。

以下是现在的样子。你可以看到我想避免的第一行末尾的差距。

我可以使用最新版本的jQuery和jQuery UI。对于它的价值，IE＆lt; 9对我来说不是一个问题。

我知道水平间隔的div是一个常见的问题，但是我发现的任何教程和提示都要求你知道行中应该有多少div，而且div也不会突破到新行。

感谢任何帮助。

Answer 1

我实际上决定使用无序列表作为包含div的列表项的容器，因此我可以采用正确的列表项来证明。

此处有更多详情：Why does horizontal list item justification not work with dynamically added items