Question

我有这个fancybox画廊gallery 1＆amp; 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>

我们如何才能拥有不同图像尺寸的不同图库组？有时我需要在thumnail中的图像的原始外观，有时只需要图像的截面剪切。

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

Answer 1

因为图像具有不同的高度，所以浮动是“绊脚石”。也就是说，当一个锚/图像试图向左浮动时，它会捕获上面一行中的高图像。

更好的方法是使用display: inline-block代替float：

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

（您可以尝试使用vertical-align: bottom代替top，因为您可能更喜欢外观。由您决定。值得玩。）

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

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

对于缩略图剪裁/裁剪，无法根据您所描述的内容完全自动生成缩略图。你必须手动完成。

来自Fancybox图库的图像对齐

2 个答案: