Floating DIVs not flowing properly

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。请注意缩略图如何很好地包裹并保持垂直对齐。

---

UPDATE：

这里是与inline-block的铲球这个问题，其他的详细文章：

• Cross-Browser Inline-Block

你可以从这些文章通知，让它跨浏览器工作有点棘手。

Answer 2

两个选项：

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

默认行为看起来是正确的，这基于文本在浮动DIV周围流动时发生的情况。根据你想要做的，我会选择＃1选项。

Answer 3

你可以尝试使用CSS表格显示你的divs ... ie。

#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>