奇怪的浮動div行爲

Question

我試圖創建圖像和說明UL列表。列表中的5件物品沒有問題，第6件物品漂浮在右邊，第7件物品掉落並漂浮在左邊。 什麼可能導致此行爲？ 發生這種情況無論是在IE 8和Firefox 13

looks like this http://i50.tinypic.com/2uz5oqb.jpg

這裏的HTML：

<ul class="subpagesList subpagesGallery" id="subList2"><li class="l1"> 
     <div class="photo"> 
     <a href="?galeria-1,15"><img src="files/150/_demo_01.jpg" alt="" /></a> 
     </div> 
     <div class="descriptionBox"> 
      <h2><a href="?galeria-1,15">Galeria 1</a></h2> 
      <div class="description"><p>Galeria 1</p></div> 
     </div> 
    </li><li class="l2"> 
     <div class="photo"> 
     <a href="?galeria-2,16"><img src="files/150/_demo_02.jpg" alt="" /></a> 
     </div> 
     <div class="descriptionBox"> 
      <h2><a href="?galeria-2,16">Galeria 2</a></h2> 
      <div class="description"><p>Galeria 2</p></div> 
     </div> 
    </li><li class="l3"> 
     <div class="photo"> 
     <a href="?galeria-3,17"><img src="files/150/_demo_03.jpg" alt="" /></a> 
     </div> 
     <div class="descriptionBox"> 
      <h2><a href="?galeria-3,17">Galeria 3</a></h2> 
      <div class="description"><p>Galeria 3</p></div> 
     </div> 
    </li><li class="l4"> 
     <div class="photo"> 
     <a href="?galeria-4,18"><img src="files/150/_demo_04.jpg" alt="" /></a> 
     </div> 
     <div class="descriptionBox"> 
      <h2><a href="?galeria-4,18">Galeria 4</a></h2> 
      <div class="description"><p>Galeria 4</p></div> 
     </div> 
    </li><li class="l5"> 
     <div class="photo"> 
     <a href="?galeria-5,19"><img src="files/150/_demo_05.jpg" alt="" /></a> 
     </div> 
     <div class="descriptionBox"> 
      <h2><a href="?galeria-5,19">Galeria 5</a></h2> 
      <div class="description"><p>Galeria 5</p></div> 
     </div> 
    </li><li class="lL"> 
     <div class="photo"> 
     <a href="?galeria-6,20"><img src="files/150/_demo_01.jpg" alt="" /></a> 
     </div> 
     <div class="descriptionBox"> 
      <h2><a href="?galeria-6,20">Galeria 6</a></h2> 
      <div class="description"><p>Galeria 6</p></div> 
     </div> 
    </li></ul> 

和CSS：

/* SUB PAGES LIST STYLES */ 
.subpagesList { 
    float: left; 
    width: 100%; 
    margin: 7px 0; 
    list-style: none; 
} 
.subpagesGallery { 
    /*width: 100%;*/ 
    overflow: hidden; 
    width: 800px; 
} 

.subpagesList li { 
    clear: left; 
    float: left; 
    width: 96%; 
    margin: 10px 0; 
    padding: 13px 2%; 
    border-left: 2px solid #e7eaee; 
    background: url('img/items_shade.png') repeat-x left top; 
} 
.subpagesGallery li { 
    clear: none; 
    float: left; 
    margin: auto auto; 
    padding: 0 0; 
    overflow: hidden; 
    width: 150px; 
} 

* html .subpagesList li { 
    width: 100%; 
} 

.subpagesList li .photo { 
    float: left; 
    margin: 0 18px 5px 0; 
} 
.subpagesGallery li .photo { 
    clear:both; 
    overflow: hidden; 
} 

.subpagesGallery li .descriptionBox{ 
    clear:both; 
    width:180px; 
    overflow: hidden; 
} 

.subpagesList li h2 { 
    padding-bottom: 10px; 
} 

Answer 1

你問了爲什麼這是發生的，而不是如何解決它。下圖應該清楚發生了什麼。

的div是浮動左側;第6個div落在左邊的前5名之下，但由於div 5比div 4短，因此div 6與div 4對接，不能向左移動。 Div 7低於div 6，並且可以將一直移動到左側。

這絕對是一個陷阱。

Answer 2

這是由失蹤 '高度' 引起的屬性爲「李'元素。 'Gallery 5'元素比其他元素短一點，'Gallery 6'元素實際上並不漂浮在右邊，但是在'Gellery 5'元素下。然後，「畫廊6」元素開始自然漂浮在左側。

.subpagesGallery li { 
    clear: none; 
    float: left; 
    margin: auto auto; 
    padding: 0 0; 
    overflow: hidden; 
    width: 150px; 
    height:200px; /*that helped*/ 
} 

也許只是張貼問題上做使你更聰明......我不知道肯定;）

Answer 3

您可以使用jQuery equl高度，使同一高度的每一個<li>，請找代碼如下： -

function equalHeight(group) { 
    tallest = 0; 
    group.each(function() { 
     thisHeight = $(this).height(); 
     if(thisHeight > tallest) { 
     tallest = thisHeight; 
     } 
    }); 
    group.height(tallest); 
} 

$(document).ready(function() { 
    equalHeight($(".subpagesList li")); 
}); 

Here is the tutorials

Answer 4

個人而言，我想給一個min-height的項目來代替。這樣，無論圖像大小/內容如何，​​您都會保持至少一定的高度，同時允許內容增長。當然，這是在瞭解<li>不會超過某個（極端）高度，或者您再次遇到此問題。