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>

直到昨天，它工作正常，但从今天起它看起来很破碎（我不知道哪个更改可能导致这个）：第一行工作正常，但第二行包含一个元素，调整右< / em>，最后一个图片有另一行。

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

任何想法，有人吗？谢谢！

修改：我更正了图片;缩略图的高度略有不同，但我仍然无法在我的模型中重现问题。

Answer 1

你确定图像的高度相等吗？例如，如果你的划痕中的第二个比其他人高，那么第四个位于右边是正常的： - ）

Answer 2

我认为您需要清除浮动，例如<br style="clear:both;" /> 试试这个：

<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>
    <br style="clear:both;" />
    <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>
   <br style="clear:both;" />
</div>

浮动元素只能部分工作

2 个答案: