对齐来自 Fancybox 画廊的图像答案

【问题标题】：Alignment of images from a Fancybox gallery对齐来自 Fancybox 画廊的图像
【发布时间】：2013-05-28 13:46:14
【问题描述】：

我有这个花式画廊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>

我们如何才能拥有不同图像尺寸的不同画廊组？有时我需要缩略图中图像的原始外观，有时只需要图像的部分剪辑。

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

【问题讨论】：

标签： jquery html css fancybox image-gallery

【解决方案1】：

由于图像具有不同的高度，浮动是“snagging”。也就是说，当一个锚点/图像试图向左浮动时，它会捕捉到上面一行中的一个高图像。

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

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

（您可以尝试vertical-align: bottom 而不是top，因为您可能更喜欢外观。由您决定。值得一玩。）

【讨论】：

【解决方案2】：

由于图像的高度不同，它们没有按需要定位。

您可以通过向.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;}

您可以根据自己的喜好选择想要的高度。

至于缩略图剪辑/裁剪，没有办法自动生成完全符合您所描述内容的缩略图。您必须手动完成。

【讨论】：