1

我正在尝试使用图像和描述创建 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;
}
4

4 回答 4

1

你问为什么会发生这种情况,而不是如何解决它。下图应该清楚地说明发生了什么。

在此处输入图像描述

div 向左浮动;第 6 个 div 在向左“途中”下降到前 5 个下方,但由于 div 5 比 div 4 短,所以 div 6 与 div 4 对接,不能再向左移动。div 7 低于 div 6,并且可以一直向左移动。

这绝对是 div 的一个陷阱。

于 2012-06-20T20:44:06.030 回答
0

这是由于缺少 'LI' 元素的 'height' 属性造成的。“Gallery 5”元素比其他元素短一些,“Gallery 6”元素实际上不是向右浮动,而是在“Gellery 5”元素下方。然后“Gallery 6”元素开始自然地漂浮在左侧。

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

也许只是在SO上发布问题会让你更聪明......我不确定;)

于 2012-06-20T20:01:43.163 回答
0

您可以使用 JQuery equl height 使每个<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"));
 });

这里是教程

于 2012-06-20T20:06:46.063 回答
0

就我个人而言,我会给这些物品 amin-height代替。这样,无论图像大小/内容如何,​​您都将至少保持一定的高度,同时允许内容增长。当然,这是在理解<li>不会超过某个(极端)高度的情况下,否则您会再次遇到此问题。

于 2012-06-20T20:07:21.083 回答