Question

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

使用float：left我得到this result

我找到example of another way使用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>框。

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

Answer 1

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

浮动：向左并且不清楚到下一行

1 个答案: