Странное поведение плавающего 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

Вы задали вопрос , почему это происходит, а не как его исправить. На приведенной ниже диаграмме должно быть ясно, что происходит.

В дивы плавают слева; 6-й div падает ниже пятого «на своем пути» влево, но поскольку div 5 короче, чем div 4, div 6 борется с div 4 и не может двигаться дальше дальше. Div 7 падает ниже div 6 и может двигаться полностью влево.

Это определенно гоча с divs.

Answer 2

Это было вызвано отсутствием 'высоты' атрибут для " LI '. Элемент «Галерея 5» был немного короче остальных, а элемент «Галерея 6» фактически не плавал вправо, а под элементом «Геллери 5». Затем элемент «Галерея 6» начал плавать, естественно, слева.

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

Может просто разместить вопрос на SO делает вас умнее ... Я не знаю точно;)

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> не будет превышать определенную (экстремальную) высоту, или вы снова столкнетесь с этой проблемой.