Question

我有3个不同高度的UL，我希望它们在右手边有一个边框到达包含div的底部，所以它们都是相同的。我不能将高度添加到ul，因为容器si将从正在加载的动态内容改变高度

小提琴： http://jsfiddle.net/zangief007/0ddev8rp/1/

如果红线一直到底部

，那就好了

HTML：

<div class="container">
<ul>
                            <li><a href="">1</a></li>
                            <li><a href="">2</a></li>
                            <li><a href="">3</a></li>
                            <li><a href="">4</a></li>
                            <li><a href="">5</a></li>
                        </ul>

                        <ul>
                            <li><a href="">1</a></li>
                            <li><a href="">2</a></li>
                            <li><a href="">3</a></li>
                            <li><a href="">4</a></li>
                            <li><a href="">5</a></li>
                            <li><a href="">1</a></li>
                            <li><a href="">2</a></li>
                            <li><a href="">3</a></li>
                            <li><a href="">4</a></li>
                            <li><a href="">5</a></li>
                        </ul>

                        <ul>
                            <li><a href="">1</a></li>
                            <li><a href="">2</a></li>
                        </ul>

                        <ul>
                            <li><a href="">1</a></li>
                            <li><a href="">2</a></li>
                            <li><a href="">3</a></li>
                            <li><a href="">4</a></li>
                            <li><a href="">5</a></li>
                            <li><a href="">1</a></li>
                            <li><a href="">2</a></li>
                            <li><a href="">3</a></li>
                            <li><a href="">4</a></li>
                            <li><a href="">5</a></li>
                        </ul>
</div>

CSS：

ul{
    float:left;
    border-right:red solid 3px;
}
li{
    list-style:none;
    padding:10px;
}
div{
    background:grey;
    float:left;
}

Answer 1

最简单的方法是将div显示为表格，将ul显示为表格单元格：

ul{
    border-right:red solid 3px;
    display:table-cell;
}
li{
    list-style:none;
    padding:10px;
}
div{
    background:grey;
    display: table;
}

另见your updated fiddle

它有一个限制：它不适用于IE7。有关详细信息，请参阅http://quirksmode.org/css/css2/display.html。

块元素自动高度为ul

1 个答案: