强制div内的缩略图组来打破线条

时间:2013-06-29 18:39:28

标签: css wordpress line-breaks nextgen-gallery

简单地说,我有这个页面:

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

每组缩略图都是NextGen Gallery,如果需要,我想让画廊断行,这样就不会强迫它们在一行中显示为块,而且画廊将彼此相邻而不是每行一个。< / p>

一张图片胜过千言万语所以我拍了一个我想做的例子:

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;
}

Pfff。正在做我的标题..任何人都有任何建议吗?

1 个答案:

答案 0 :(得分:0)

确定。所以问题是你的图像在ngg-galleryoverview div中按三分组进行分组。因此,即使它们是浮动的(图像和ngg-galleryoverview div),您的图像也将总是分组为三个(您可能需要稍微检查一下盒子模型)。

我不知道画廊的功能如何 - 这可能需要标记才能使它们正常工作 - 但为什么你的图像没有按照你想要的方式流动。

事实上,如果您使浏览器窗口真的宽,您可以看到接下来的三个图像将跳到第一行。

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