Jquery Fancybox图库中的图像对齐

我有一个fancybox画廊&

这些画廊的图像不会像它们应该的那样向左浮动

这是我的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:

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

---

我在网上查看了一下，但没有发现什么有用的东西。

因为图像的高度不同，所以浮标“有问题”。也就是说，当锚定/图像尝试向左浮动时，它会捕捉到上面一行中的高图像

更好的方法是使用

display:inline block

而不是

float

：

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

---

（您可以尝试使用

vertical align:bottom

而不是

top

，因为您可能更喜欢它的外观。取决于您。值得玩玩。）

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

您可以通过向

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

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

至于缩略图剪切/裁剪，没有办法完全按照您描述的内容自动生成缩略图。您必须手动执行此操作

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