2

高さがそのコンテンツ（ a ul）によって計算されている要素があります。現時点ではul、それぞれに 3 つのアイテムを含む 2 つの行があります。.element次の CSS を使用して画面上の位置を設定しています。

.element {
position: absolute;
left: 30px;
top: -139px;
}

このためのマークアップは

<div class="element">
    <ul>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
    </ul>
</div>

将来的には に 3 番目の行を追加する必要があります。ulこれは、top私が使用している配置がこの新しい行を非表示にすることを意味します (要素 div が別の div の上にあるため)。これは理想とはほど遠いものです。

jQueryでこれを行う必要があると思うので、追加される行数に関係なく、これを修正するためにCSSを変更する必要はありません.

これまでのところ、私が持っている WIP jQuery は次のようになります。

var elemImgHeight = $('.element li img').height();
var toggles = $('.element li');
var numOfRows = math.ceil( toggles.length() / 3 );
var elemTopOffset = numOfRows * elemImgHeight + 10;

    if ($('.element li') => 7) {
        $('.element').css({ top:elemTopOffset })
    }

私はこれで正しい軌道に乗っているかどうかわからないので、いくつかのポインタでできますか?

前もって感謝します。

4

1 に答える 1

1

簡単です...次のhtml構造があるとしましょう：

<div class="element">
    <ul>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
        <li><img src="#" />Model</li>
    </ul>
</div>​​​​​​​

そして、最後のli要素のみが表示されるようにトップ位置を計算したい...これを使用して：

var theElement = $(".element");
var topPosition = theElement.find("ul li:last").outerHeight()-theElement.outerHeight();
theElement.css("top",topPosition);

サンプルはここにあります: http://jsfiddle.net/senegalo/eEya4/2/

于 2012-11-22T15:42:02.540 に答える