1

私は水平家系図を開発しています。

現在のステップ- CSS Line-Height を割り当てて、ネストされたコンテンツに基づいて各項目を垂直方向に中央揃えにします。

問題- ネストされた項目の Line-Height 値が、継承のために指数関数的に増加します。
各値を個別に割り当てることで機能させることができますが、動的な解決策を探しています。

ここで私のデモコードを表示してください - http://jsfiddle.net/kirtcarter/TLJT9/

問題のjQueryは次のとおりです。

$(document).ready(function(){
    $("#familytree li").each(function(n) {
        var LineHeight = $(this).height()+'px';
        $(this).css({'line-height':LineHeight});
    });
});

望ましい結果:
ここに画像の説明を入力

4

3 に答える 3

2

次の行に沿って何かを行う必要があります。

$(document).ready(function(){
    $(".item").each(function(n) {
        var newLineHeight = $(this).parent('.wrapper').height() +'px';
        $(this).css({'line-height':newLineHeight});
    });
});​
于 2012-11-06T17:56:10.553 に答える
1

子から始めて、異なる順序でオブジェクトをトラバースする必要があります。

line-heightまた、高さを確認する前に 1 にリセットすることもできます。

これを試して：

$($("#familytree li").get().reverse()).each(function(n) {
    var newLineHeight = $(this).height()+'px';
    //uncomment the following line and run to see issue
    $(this).css({'line-height':newLineHeight});
});

または、より読みやすい方法で:

var $elements = $("#familytree li");
var $elementsReversed = $($elements.get().reverse());
$elementsReversed.each(function(n) {
    var newLineHeight = $(this).height()+'px';
    //uncomment the following line and run to see issue
    $(this).css({'line-height':newLineHeight});
});

ここでデモ。

于 2012-11-06T18:28:43.447 に答える
0

CSS

#familytree li{   line-height: 100%; }

これらのすべてが明示的な高さを持っているように見えるので、これはうまくいくはずです

于 2012-11-06T17:49:00.397 に答える