Question

我准备了jsfiddle我的问题：

如何使ul列的高度相同，而不依赖于其中包含的数据量。

CSS：

#priceTable{
    width:780px;
    margin:0 auto;
    background:gray;
}
#priceTable ul{
    display:inline-block;
    margin:0 40px 0 0;
    height:100%;
    min-height:100%;
    width:195px;
    background:orange;
}
#priceTable li{
    text-align:center;
    font-weight:bold;
    color:#000;
}

HTML：

                        <div id="priceTable">
                            <ul class="rowOne">
                                <li class="rowName">Package</li>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                                <li>5</li>
                                <li class="button"><a href="#">Buy Now</a></li>
                                </ul>
                                <ul class="rowTwo">
                                    <li class="rowName">Package</li>
                                    <li>1</li>
                                    <li>2</li>
                                    <li>3</li>
                                    <li>4</li>
                                    <li>5</li>
                                    <li>6</li>
                                    <li class="button"><a href="#">Buy Now</a></li>
                                    </ul>
                                    <ul class="rowThree">
                                        <li class="rowName">Package</li>
                                        <li>1</li>
                                        <li>2</li>
                                        <li>3</li>
                                        <li>4 </li>
                                        <li class="button"><a href="#">Buy Now</a></li>
                                        </ul>    
                            </div><!-- end #priceTable -->

Answer 1

使用CSS执行此操作的方法是将它们设置为固定高度。而不是min-height : 100%使用类似min-height: 300px的内容。但由于您不知道每个uls将包含多少数据，因此这是一个非常不灵活的解决方案。

现在，如果你希望你的所有列都具有相同的高度，那么我希望它们都像最高的一样高。

这个jQuery代码应该可以解决这个问题：

var equalHeight = function ( group ) {
    var tallest = 0;

    group.each(function() {
        var thisHeight = $(this).height();
        if( thisHeight > tallest ) {
            tallest = thisHeight;
        }
    });

    group.height( tallest );
}

而不是仅仅使用您的元素组在文档中调用它

$(function () {
    equalHeight($('.rows'));
});

这里的工作示例=＆gt; http://jsfiddle.net/y2eHg/

Answer 2

硬解决方案是使用overflow: hidden

设置固定高度（以像素为单位）

Answer 3

您不需要Javascript来执行此操作。有许多HTML / CSS技术可以解决这个问题。出现了一个简单的Google搜索articles like these。

是的，这些描述的是<div>而不是<ul>，但这些技术仍然适用。

CSS ul高度差异

3 个答案: