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/

根据行数计算元素的高度

1 个答案: