1

我有这个 fancybox 画廊画廊 1和画廊 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>

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

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

4

2 回答 2

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，因为您可能更喜欢外观。由您决定。值得一玩。）

于 2013-05-28T13:57:12.677 回答
1

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

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

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

至于缩略图剪裁/裁剪，没有办法自动生成完全符合您所描述内容的缩略图。您将不得不手动进行。

于 2013-05-28T13:58:14.660 回答