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 手法は多数あります。簡単な Google 検索で、このような記事 が見つかりました。

はい、これらは<div>s の代わりに<ul>s を説明していますが、テクニックはまだ適用可能です。

于 2012-05-09T22:55:20.490 に答える