"更好"漂浮在CSS中

Question

我正在试验CSS和float属性.我有这个"网站",有很多div与80px网格对齐,并且float: left:

CSS中是否有一种方法使它看起来像这样 - 所以元素可以使用它们上方的空白区域？

没有JavaScript,如果可能的话.

谢谢,马丁.

Answer 1

不,这不能在CSS中完成.最好的方法是使用一个名为砌体的javascript项目,我很害怕.

http://masonry.desandro.com/

Answer 2

对于水平和垂直平铺动态内容,CSS选项为:

• float:left,正如您已经看到的,只提供有限的水平平铺.
• display:inline-block给出了不同的结果float:left,但没有平铺.
• CSS多列布局尚未完全定义.它支持垂直流进入隐式列,但可能不符合平铺列.
• 灵活的盒子布局尚未得到很好的支持.它支持一种可能不符合平铺条件的水平或垂直流动,尽管它感觉像是朝着正确方向迈出的一步.

简而言之,即使是尚未完全定义的CSS标准似乎也不支持这一点; 所以它可能还有很长的路要走.最简单的后备选项是使用jQuery插件.

除了Masonry(正如@Billy Moat所建议的那样),另外几个jQuery插件是Isotope和Tiles Gallery.似乎最经常提到砌体.