2

複数の UL (列) を使用して、ページの下部に横に並べた列を提供しています。各 UL は DIV (columnContainer) 内にあります。これらの DIV は、別の DIV (シェルフ) 内にあります (そして、それはずっとタートルです)。

columnContainer DIV の左の境界線を使用して、コンテンツの各列の間に垂直線を作成しています。各 UL のコンテンツの高さが異なるため、縦線も異なります。

縦線をすべて同じサイズにしたい。これは、最も高い UL に一致するように列の UL の高さを拡張する必要があるか、親を満たすために高さを拡張するために columnContainer DIV が必要であることを意味すると思います (これは、最も高い子 UL によって高さが確実に制御されますか?)。

コンテンツの量と列の数は動的に変化するため、最小/最大の高さを単純に定義することはできません。

私の問題のサンプル バージョンは、http: //pastebin.com/ti5u41Eyにあります。

ありとあらゆる助けが大歓迎

4

2 に答える 2

3

残念ながらheight: 100%;、親コンテナに高さが指定されていないと機能しません。

ハードコーディングされた高さの設定はあまり柔軟ではありません (フッターのコンテンツの量を変更するたびに、この値を更新する必要があります)。

より柔軟なアプローチは、JavaScript を使用することです。トリックを行う必要があるjQueryを次に示します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script>
$(document).ready(function(){
    recalcColumnHeights ();
    $(window).resize(recalcColumnHeights);
});


recalcColumnHeights = function (){
    tallest = null;
    $('.wptheme-expandedQuickLinksShelfColumnContainer')
        .each(function(){
            if (tallest == null || $(this).height() > tallest.height()) {
                tallest = $(this);
            }
        })
        .height(tallest.height());
    ;
};
</script>

ここで例を見てみましょう: http://jsfiddle.net/irama/m7Z7a/

EDIT：ブラウザウィンドウのサイズを変更すると、列の高さに影響を与えることがあるため、ウィンドウのサイズ変更時に高さを再計算するこのバージョンを使用することをお勧めします：http://jsfiddle.net/irama/m7Z7a/1/

行き方を教えてください！

于 2011-08-12T09:59:32.940 に答える
1

JavaScript 以外のソリューションでは、偽の背景 (この場合、すべての列の垂直線を含むもの) を使用しています。

これにより、(視覚的に) すべての列が同じ高さになることが保証されます。

例：

html :

<div class="theBackground">
    (your columns here)
</div>

css :

.theBackground {
    background: url(fakebackground.gif) repeat-x;
}
于 2011-08-12T10:39:18.577 に答える