jquery - 来自 Fancybox 画廊的图像对齐

Question

我有这个 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>

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

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

Answer 1

因为图像有不同的高度， float 是“ Hook ”的。也就是说，当 anchor /图像试图向左浮动时，它会捕捉到上面一行中的高图像。

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

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

(您可以尝试使用 vertical-align: bottom 而不是 top，因为您可能更喜欢这种外观。由您决定。值得一试。)