文章/答案/技术大牛

发布

社区首页 >问答首页 >来自Fancybox图库的图像对齐

问来自Fancybox图库的图像对齐
EN

Stack Overflow用户

提问于 2013-05-28 21:46:14

回答 2查看 886关注 0票数 1

我有这个fancybox画廊gallery 1 & gallery 2

这些画廊的图像不会像他们应该的那样漂浮在左边。

这是我的CSS：

.gal { display:block; padding:3px; border:1px solid #ccc; float:left; margin:4px;     margin-top:20px; overflow:hidden;}
.gal img { display:block; float:left; }
.gal:hover {background:#ccc;}

HTML：

<div class="gal-a" >
<a href="gal/5.png" class="gal" rel="gal"><img src="gal/thumb/5.png" alt=""></a>
<a href="gal/6.png" class="gal" rel="gal"><img src="gal/thumb/6.png" alt=""></a>
<a href="gal/7.png" class="gal" rel="gal"><img src="gal/thumb/7.png" alt=""></a>
<a href="gal/8.png" class="gal" rel="gal"><img src="gal/thumb/8.png" alt=""></a>
</div>

我们如何才能拥有不同图像大小的不同画廊群？有时我需要缩略图图像的原始外观，有时只是图像的一部分剪辑。

我上网看了看，但没有找到有用的东西。

html

css

fancybox

image-gallery

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-05-28 21:57:13

因为图像有不同的高度，所以花车被“卡住”了。也就是说，当锚点/图像试图向左浮动时，它会捕捉到上面一行中的一个高图像。

更好的方法是使用display: inline-block而不是float

.gal {
    display: inline-block;
    vertical-align: top;
    border: 1px solid #CCC;
    margin: 20px 4px 4px 4px;
}

(您可以尝试使用vertical-align: bottom而不是top，因为您可能更喜欢它的外观。你说了算。值得一试。)

票数 1

Stack Overflow用户

发布于 2013-05-28 21:58:15

它们的位置不符合预期，因为图像的高度不同。

您可以通过向.gal添加一个高度来解决此问题。

.gal { height:132px /*based on the smallest height for thumbnails*/; display:block; padding:3px; border:1px solid #ccc; float:left; margin:4px;     margin-top:20px; overflow:hidden;}

您可以根据自己的喜好选择所需的高度。

至于缩略图剪辑/裁剪，没有办法自动生成与您所描述的内容完全相同的缩略图。您将不得不手动完成此操作。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16793713

复制

相似问题

问来自Fancybox图库的图像对齐
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问来自Fancybox图库的图像对齐EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问来自Fancybox图库的图像对齐
EN