0

我已经为我的问题准备了一个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 -->​
4

3 回答 3

0

使用 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'));
});

这里的工作示例=> http://jsfiddle.net/y2eHg/

于 2012-05-09T22:43:25.297 回答
0

硬解决方案是以像素为单位设置固定高度overflow: hidden

于 2012-05-09T22:46:14.050 回答
0

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

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

于 2012-05-09T22:55:20.490 回答