没有包装器div的CSS对齐行

Question

这就是我所拥有的：

​

​

这就是我想要的：

​

​

我在所有较小的div周围都有一个容器div，较小的div漂浮在左边。我怎样才能让它们像下面的图片一样完美地排成一行呢？这很容易，但问题是我不想为每一行使用容器div，因为我希望每行的图像数量是流动的(容器宽度是可变的)。如果没有JS hacks，这是可能的吗？

Answer 1

只需将float:left更改为display:inline-block即可。这将以行的方式布局图像，就像文本布局一样，这听起来就像您想要做的那样。

Answer 2

我发这篇文章有点担心，因为我不知道你是不是有资格成为Javascript黑客……有一个插件可以很好地解决这个问题，它就是Masonry JS。但是，如果您认为插件是一种技巧，那么我建议对一行中需要的元素应用display:inline-block;，并删除float:left;属性。