1

例: JS フィドル

$(document).ready(function(){  
    sync_height(".title",".row");
    sync_height(".header-label",".row");
});

function sync_height(class1, class2) {
    var h1 = 0, h2 = 0;
    $(class1).each(function(){
        h1 = Math.max($(this).height(), h1);
    });
    $(class2).each(function(){
        h2 = Math.max($(this).height(), h2);
    });
    console.log("Max heights computed: h1="+h1+" h2="+h2);
    if(h1 < h2) { // Set height to the max height encountered 
                  // between the two class elements.
        $(class1).each(function(){
            $(this).height(h2);
        });
    }else{
        $(class2).each(function(){
            $(this).height(h1);
        });
    }
    console.log("Final heights post sync: h1="+
                $(class1).height()+
                " h2="+$(class2).height());
}

私は多くの場所で、テーブルの TD プロパティを使用して 2 つの HTML 要素を整列させ、パネル レイアウトをシミュレートする方法を読んだことがあります。最初の列がネストされた UL/LI ツリーを表す単一のテーブルを使用して、ツリー テーブルを簡単に作成できます。しかし、私のアプリでは、リスト部分が独立した div で、セル テーブル部分が別の div であるツリー テーブルが必要です。(さらに、別のテーブルによって表され、セル テーブルの上に配置される複数レベルのスパンされた列ヘッダーがありますが、これはこの説明の範囲外です)。したがって、従来の意味でツリー テーブルを構築することはできません (つまり、テーブル内でツリーをシミュレートする)。

私の目標は、リスト パーツ (li id="listTree") とテーブル パーツ (table id="cellTable") の間の「行」を揃えることです。例では jQuery で高さを計算し、ウィジェットの LI 要素と TR 要素の間で高さを同期していますが、上下に見られるように「赤」のギャップを引き起こしている UL 部分の同期に成功していません。リストの（左側）。ツリーとテーブルの行を同期する方法についてのアイデアはありますか? ピクセル計算を正しく行う限り、目的の寸法に基づいて同期できるはずだと思いますか?

4

1 に答える 1

2

問題は、a などのインライン要素がspanCSS で表現された高さを占有しないことです。

これをスタイリングに追加してみてください：

.header-label {
    display: inline-block;
}

更新されたフィドルを参照してください

于 2013-07-02T06:29:45.440 に答える