Question

我正在制作照片库，每个缩略图都在自己的DIV中，并在包含DIV的左侧浮动。它一直显示正确，直到垂直缩略图输入等式。现在，当下一行应该开始时，下一行的第一项是在最后一个垂直DIV（缩略图）的左侧，而不是在包含DIV的左侧齐平。

alt text http://tapp-essexvfd.org/images/capture1.jpg

这是CSS：

#galleryBox {
        width: 650px;
        background: #fff;
        margin: auto;
        padding: 10px;
        text-align: center;
        overflow: auto;
    }
    .item {
        display: block;
        margin: 10px;
        padding: 20px 5px 5px 5px;
        float: left;
        background: url('/images/content_bottom.png') repeat-x scroll bottom #828282;
        }

和HTML：

<div id="galleryBox" class="ui-corner-all">
                <div id="file" class="ui-corner-all">
                    <form name="uploadPhoto" id="uploadPhoto" method="post" action="" enctype="multipart/form-data">
                        <p><label for="photo">Photo:</label><input type="file" name="photo" id="photo"/></p>
                        <p><label for="caption">Caption: <small>Optional</small></label><input type="text" id="caption" name="caption"/></p>
                        <p align="center"><input type="submit" value="Upload" name="send" id="send" class="addButton ui-state-default ui-corner-all"/></p>
                    </form>
                    <a name="thumbs"></a>
                </div>
                <div class="item ui-corner-all">

                    <a href="http://tapp-essexvfd.org/gallery/photos/201004211802.jpg" class="lightbox" title="test1">
                        <img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211802_thumb.jpg" alt="test1"/></a><br/>
                    <p><span class="label">test1</span></p>
                </div>

                <div class="item ui-corner-all">
                    <a href="http://tapp-essexvfd.org/gallery/photos/201004211803.jpg" class="lightbox" title="test3">
                        <img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211803_thumb.jpg" alt="test3"/></a><br/>
                    <p><span class="label">test3</span></p>
                </div>
</div>

Answer 1

您可以使用本文所述的内联块：

The Inline-Block Thumbnail Gallery

该文章解决了与缩略图相同的问题。

我也发现了simple example using inline-block thumbnails。请注意缩略图如何很好地包裹并在其行内保持垂直对齐。

<强>更新

以下是使用内联块解决此问题的另一篇详细文章：

Cross-Browser Inline-Block

正如您可以从这些文章中看到的那样，让它跨浏览器工作有点棘手。

Answer 2

两个选项：

设置缩略图DIV的最大高度，以便它们正确布局，无论它们是水平还是垂直。
使用“clear：left”重置垂直旁边缩略图DIV上的浮动。

根据文本在浮动DIV周围流动时发生的情况，默认行为显示正确。根据你要做的事情，我会选择＃1选项。

Answer 3

你可以尝试为你的div使用css表显示... 即

#galleryBox {
    display: table;
    ...
}
.item {
    display: table-cell;
    ...
}
.row {
    display: table-row;
}

所以你必须添加另一个div来包围每一行中的项目

<div id="galleryBox">
    <div class="row">
        <div class="item">image</div>
        <div class="item">image</div>
        <div class="item">image</div>
        <div class="item">image</div>
    </div>
    <div class="row">
        <div class="item">image</div>
        <div class="item">image</div>
        <div class="item">image</div>
        <div class="item">image</div>
    </div>
</div>

漂浮的DIV不能正常流动

3 个答案: