javascript - 相同高度 li 和自动调整容器 div 的高度

Question

我想要水平对齐的 li 元素都具有相同的高度和一些最小高度。我希望容器 div 的大小随着 li 元素高度的增加而从某个最小高度增加。这是我尝试过的 jsfiddle:http://jsfiddle.net/6NKn2/a

HTML:

<div id='d'>
<ul id='u'>
    <li class='l'>item 1 long item long item long long long long long long</li>
    <li class='l'>item 2</li>
    <li class='l'>item 3</li>
</ul>

CSS:

#d {
    min-height: 100px;
    border: 1px solid black;
}
#u {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 1px solid green;
    height: 100%;
}
.l {
    float: left;
    border: 1px solid black;
    width: 50px;
    height: 100%;
}

我不知道如何实现这一点。我也想避免使用新的 CSS3 属性来支持旧的 IE (7+)。使用 JavaScript 也很好。你能帮我解决这个问题吗？谢谢。

Answer 1

如果你想拥有所有<li>相同高度的元素使用此 JQuery 代码:

var $height = 0 ;
$("li.l").each(function(){
    if(($(this).height())>$height){
            $height = $(this).height();
    }
});
$("li.l").each(function(){
    $(this).css("height",$height)
});

为了增加容器的高度，你需要设置overflow:auto :

#d
{
    min-height: 100px;
    border: 1px solid black;
    overflow:auto;   /*  added  */
}

here is jsFiddle