根據行數計算元素的高度

Question

我有一個元素的高度正在通過其內容計算（一個ul）。目前ul有兩行，每行三項。我使用以下CSS設置屏幕上.element的位置;

.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> 

在未來將會有一個需要第三行添加到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 }) 
    } 

我不知道如果我在正確的軌道與此，所以可以用一些指針呢？

在此先感謝。

Answer 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/