html - 左侧的 float 元素仅部分起作用

Question

我有一个 HTML 页面，其中包含一个简单的图片库，由灯箱 (fancybox) 拉皮条。图片应该向左浮动，这应该会导致第一行出现三张图片，第二行出现其余两张图片。

<div class="image-gallery clearfix">
    <a rel="lightbox[image]"
       href="link/to/full-size-image"
       title="Image 1 floats left (ok)">
        <img src="url-of-thumbnail" alt="[image]"/>
    </a>
    <a rel="lightbox[image]"
       href="link/to/full-size-image"
       title="Image 2 floats left (ok)">
        <img src="url-of-thumbnail" alt="[image]"/>
    </a>
    <a rel="lightbox[image]"
       href="link/to/full-size-image"
       title="Image 3 floats left (ok)">
        <img src="url-of-thumbnail" alt="[image]"/>
    </a>
    <a rel="lightbox[image]"
       href="link/to/full-size-image"
       title="Image 4 is adjusted right below Image 3. Hu?!">
        <img src="url-of-thumbnail" alt="[image]"/>
    </a>
    <a rel="lightbox[image]"
       href="link/to/full-size-image"
       title="Image 5 appears centered in another line on its own">
        <img src="url-of-thumbnail" alt="[image]"/>
    </a>
</div>

直到昨天，它工作正常，但从今天开始它看起来坏了(我不知道是哪个变化导致了这个):第一行工作正常，但第二行包含一个元素，调整正确，最后一张图片有自己的另一行。

我试图重现问题 in a little mockup ，但不幸的是我无法在那里复制它；因此我假设有一些外部元素导致了错误。我无法发布原始页面的链接，因为它不是公开的...

任何想法，任何人？谢谢!

编辑:我修改了图片；缩略图的高度略有不同，但我仍然无法在我的模型中重现该问题。

Answer 1

您确定所有图像的高度都相同吗？例如，如果您的划痕中的第二个比其他人高，则第四个位于它的右侧是正常的:-)