css - 强制 div 内的缩略图组换行

Question

简单地说，我有这个页面：

http://www.constantinos.org/portraits/

每组缩略图都是一个 NextGen 画廊，如果需要，我想让画廊断线，这样它们就不会被迫显示为一行中的块，并且画廊将彼此相邻而不是每行一个。

一张图片值一千字，所以我用photoshop制作了一个我想做的例子：

http://constantinos.org/example/Screenshot%20from%202013-06-29%2018:01:23.png

这是我对这些缩略图集的 CSS：

#ngg-gallerySingleGallery {
float:left;
display: inline !important;
clear: none;
width: auto;
}
.ngg-gallery-thumbnail img {
background-color: #FFFFFF;
border: 0;
display: block;
margin: 4px 0px 4px 5px;
padding: 4px;
position: relative;
}

噗。正在做我的标题..有人有什么建议吗？

Answer 1

好的。所以问题是你的图像在ngg-galleryoverviewdiv 中按三组分组。因此，即使它们是浮动的（图像和ngg-galleryoverviewdiv），您的图像也将始终分成三组（您可能需要稍微查看一下盒子模型）。

我不知道画廊是如何运作的——这可能是它们正常​​工作所必需的标记——但这就是为什么你的图像没有按照你想要的方式流动。

实际上，如果您将浏览器窗口设置得非常宽，您可以看到接下来的三张图片会跳到第一行。

所以，我想你最好的选择是将所有图像放入一个画廊，而不是几个较小的画廊。