根据行数计算元素的高度

I have an element that's height is being calculated by its content (a ul). At the moment the ul has two rows with three items in each. I am setting .elements position on screen using the following CSS;

我有一个元素的高度是由其内容(一个ul)计算的。目前,ul有两行,每行有三个项目。我使用以下CSS在屏幕上设置.elements位置;

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

The markup for this is

这个标记是

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

In the future there will a need to add a third row to the ul which means the top positioning I am using will hide this new row (as the element div sits on top of another div), which is far from ideal.

将来需要在ul中添加第三行,这意味着我使用的顶部定位将隐藏这个新行(因为元素div位于另一个div的顶部),这远非理想。

I think i'll need to do this with jQuery, so regardless of how many rows get added, I don't need to change the CSS to fix this.

我想我需要用jQuery做这个,所以无论添加多少行,我都不需要更改CSS来解决这个问题。

The WIP jQuery I have this far looks like:

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 })
    }

I'm not sure if I am on the right track with this, so could do with some pointers?

我不确定我是否在这方面的正确轨道,所以可以做一些指针?

Thanks in advance.

提前致谢。

1 个解决方案

#1

Easy ... let's say you have this html structure:

容易...让我们说你有这个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>

and you want to calculate the top position so that only the last li element is shown... using this:

并且您想要计算顶部位置,以便仅显示最后一个li元素...使用此:

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

a sample is located here: http://jsfiddle.net/senegalo/eEya4/2/

样本位于:http://jsfiddle.net/senegalo/eEya4/2/

#1