0

我将一系列盒子放在一起，其中包含可变长度的列表。这些盒子的宽度都相同，但高度不同。我想让这些框从左到右穿过屏幕形成列，填充在屏幕顶部，列数由屏幕宽度决定。我遇到的问题是当盒子环绕时列中的垂直间隙。请使用浏览器以 850-1150px 宽查看以下页面，以便内容显示在 2 列中。

使用 float:left 我得到了这个结果

我找到了另一种使用方法的示例display:inline-block; vertical-align:top;看起来更好，但仍然有一些垂直差距。

我目前在页面上使用的完整css代码如下：

div {
  display:inline-block;
  vertical-align:top; 
  padding:15px;
  border:2px; 
  border-color:#000; 
  border-style:solid;
  width:400px;
}

内容是一堆<div>CONTENT HERE</div>盒子。

提前感谢您的任何帮助，非常感谢。

4

1 回答 1

0

使用 Masonry 的解决方案：转到 masonry.desandro.com（上面由 nevermind 在评论中列出），并下载“masonry.pkgd.min.js”生产文件。在您希望网格工作的页面的标题中，引用砌体文件。在页面正文中，使用来自上述站点的“使用 HTML 初始化”代码片段创建一个外部 div 容器。在该块中，具有“item”类的 div 容器（或 itemSelector 设置的任何内容）。请注意，您无法格式化（至少我可以告诉） div class="item" 因此，如果您想像我一样在内容周围设置一个框，则需要浮动 div 中的第三个 div 来执行该格式化.

于 2013-07-04T18:20:37.820 回答