HTML：列中的图像

Question

如何制作类似于此工作示例的HTML / CSS布局：http://mythoughtswouldscareyou.tumblr.com/

我基本上想要复制这种总体布局。我尝试将<li>与float: left;属性一起使用，但我知道这不是可行的方法。

只是一个有效的方法的基本概述/解释将帮助我很多。

Answer 1

啊，有这方面的工具：

http://masonry.desandro.com/index.html

  

Masonry是jQuery的动态网格布局插件。把它想象成   CSS的反面浮动。浮动排列元素   水平然后垂直，砌体垂直排列，   将每个元素定位在网格中的下一个开放点。结果   最小化不同高度的元素之间的垂直间隙，就像   石匠在墙上贴石头。

Answer 2

您提到的网站使用jQuery.masonry。对于不同高度的图像和一堆float: left元素，您通常会得到彼此不一致的块。这个插件可以智能地安排这些元素，充分利用可用空间并尽可能地消除空隙。