HTML:列中的图像
HTML:列中的图像
提问于 2012-03-15 03:56:02
我怎样才能生成一个类似于下面这个工作示例的HTML/CSS布局：http://mythoughtswouldscareyou.tumblr.com/
我基本上是想复制这个总体布局。我尝试过使用带有float: left;属性的<li>，但我知道这不是可行的方法。
仅仅是一个有效方法的基本大纲/解释就会对我有很大的帮助。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-03-15 04:00:33
啊，有一些工具可以做到这一点：
http://masonry.desandro.com/index.html
Masonry是一个用于jQuery的动态网格布局插件。可以把它想象成CSS浮动的另一面。浮动先水平排列元素，然后垂直排列元素，而Masonry则垂直排列元素，将每个元素定位在网格中的下一个开放位置。其结果是将不同高度元素之间的垂直间隙最小化，就像泥瓦匠在墙上安装石头一样。
Stack Overflow用户
发布于 2012-03-15 04:02:35
你提到的网站使用的是jQuery.masonry。对于不同高度的图像和一堆float: left元素，您通常会得到彼此不能很好地对齐的块。这个插件智能地安排了这些元素，最大限度地利用了可用的空间，并消除了尽可能多的空白。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9709268
复制相关文章
相似问题
腾讯云开发者
