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>