2

我有一个元素的高度是由它的内容（a ul）计算的。目前ul有两行，每行三个项目。我正在.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>

将来需要添加第三行，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 回答