1

我试图让我的所有 li 元素占据包含它们的 ul 元素的整个高度，然后将所有 li 元素内容对齐到底部。

我无法通过第一部分，当我在其中一个 li 元素中有图像时，其他 li 元素不会扩展到相同的高度。

这是我的html

<nav id="sliderNav">
<ul id="sliderWrap">
      <li>wow 1</li>
      <li>wow2<br /> cool
      </li>
      <li>
          <img src="blank-trans.png" width="290" height="417" />
      </li>
      <div class="clearfloat"></div>
    </ul>
</nav>

我的简单CSS是

#sliderNav{
    text-align:center;
    background-color:#000;
}
#sliderNav ul{
    list-style:none;
    display:inline-block;
    background-color:#0F0;
    height:100%;
}
#sliderNav ul li{
    display:block;
    float:left;
    height:100%;
    background-color:#C3C;
}

我得到的是： 显示问题的图像

4

1 回答 1

1

几个问题：

  • 设置高度：

如果其父元素没有明确设置的高度，则不能将元素的高度设置为 100%。

  • 将内容与底部对齐：

将内容与底部对齐的最佳方法是将其放入绝对定位的容器中并将“底部”设置为“0”。这可能会使您当前的标记变得复杂，所以...

我的解决方案：

通过 jQuery（或者您可以使用任何库或普通 javaScript）循环遍历所有 li 并获取最高的高度，并将其存储在变量中：

maxHeight = 0;
$("li").each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
})

在你得到最高的之后，再次遍历 li 并设置一个顶部填充，它等于 maxHeight (tallest li) - 当前 li 的高度。这不仅会使所有 li 的高度相同，而且还会自动将内容对齐到 li 的底部：

$("li").each(function() {
    $(this).css('padding-top', maxHeight - $(this).height() + 'px');
})

我为你摆弄了这个：

http://jsfiddle.net/egrBV/2/

我为 li 添加了一个右边框，以便您可以看到它们是如何划分的。

希望有帮助

于 2012-07-18T01:02:38.717 回答