HTML：<a href="http://mythoughtswouldscareyou.tumblr.com/" rel="nofollow">http://mythoughtswouldscareyou.tumblr.com/</a></p> <p>我基本上要复制这个总体布局：在列

Question

我怎么能产生类似该工作示例的HTML/CSS布局图像。我试过使用<li>和float: left;属性，但我知道这不是要走的路。

只是一个基本的纲要/解释一个有效的方法来做到这一点会帮助我很多。

Answer 1

啊，有工具来执行此：

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

砌体是jQuery的动态网格布局插件。把它想象成CSS浮点数的倒数第一边。而浮动水平然后垂直地排列元素 ，砌体垂直排列元素， 将每个元素定位在网格中的下一个开放点。结果 最大限度地减少了不同高度元素之间的垂直间隙，就像墙上镶嵌石块的泥瓦匠一样。

Answer 2

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