CSS对齐没有包装div的行

Question

这就是我所拥有的：

这就是我想要的：

我在所有较小的div周围都有一个容器div，而较小的div则向左浮动。如何让它们像底部图像一样以完美的行对齐？这很容易，但问题是我不想为每一行使用容器div，因为我希望每行的图像数量是流动的（容器宽度是可变的）。如果没有JS黑客，这甚至可能吗？

Answer 1

你可以改变float：left来显示：inline-block。这将把图像排成行，就像文本布局一样，听起来就像你想做的那样。

Answer 2

我发布这个有些担心，因为我不知道你有什么资格作为Javascript黑客...有一个适合这个的插件，Masonry JS。但是，如果您认为插件是黑客，那么我建议将display:inline-block;应用于您想要的元素并删除float:left;属性。