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

Question

简单地说我有这个页面:

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

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

一张图片胜过一千个字，所以我用 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-galleryoverview div 中按三组分组。因此，即使它们是 float 的(图像和 ngg-galleryoverview div)，您的图像将始终分成三组(您可能需要稍微回顾一下盒子模型)。

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

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

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