css - フローティング div の奇妙な動作

Question

画像と説明を含む UL リストを作成しようとしています。リストに 5 つの項目がある場合は問題ありません。6 番目の項目は右側に浮かび、7 番目の項目は下に落ちて左側に浮かびます。この動作の原因は何ですか? これは、IE 8 と Firefox 13 の両方で発生します。

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 の下にあり、左端まで移動できます。

それは間違いなくdivの落とし穴です。

Answer 2

JQuery の同じ高さを使用して、それぞれ<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"));
 });

チュートリアルはこちら

Answer 3

これは、'LI' 要素の 'height' 属性が欠落していることが原因でした。「ギャラリー 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 4

個人的には、min-height代わりにアイテムを与えます。このようにして、画像のサイズ/コンテンツに関係なく、少なくとも一定の高さを維持しながら、コンテンツを大きくすることができます。もちろん、これは、 が<li>特定の (極端な) 高さを超えたり、この問題に再び遭遇したりしないことを理解した上でのことです。