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元素，你通常會得到塊不相互對齊的塊。這個插件智能地排列這些元素，充分利用可用空間並儘可能消除空隙。