使用jQuery创建边距以将元素定位在绝对定位元素下方

时间:2010-09-17 19:37:21

标签: javascript jquery

是否可以将底部元素#fooBar 40px放置在ul#bar下方,这将具有不同数量的li。我不想为#fooBar的每个元素创建一个具有适当边距的类。

基本上我想采用ul#bar的高度,然后将80px添加到该数字并使其成为#fooBar的上边距。感谢

2 个答案:

答案 0 :(得分:1)

这不起作用?

$('#fooBar').css('margin-top', $('ul#bar').height() + 80);

答案 1 :(得分:1)

绝对定位容器而不是ul,并在其中设置元素是不是更容易?这样他们就可以在没有JavaScript需要参与的情况下定位自己。

例如:

<html>
<head>
<style>
#container{
    position:absolute;
    top:100px;
    left:100px;
    background-color:lightblue;
}
#foo{
    width:100%;
    background-color:navy;
}
#fooBar{
    width:100%;
    background-color:green;
    margin-top:80px;
}
</style>
</head>
<body>

<div id="container">
<div id="foo">Foo</div>
<ul>
<li>Test</li>
<li>Test</li>
</ul>
<div id="fooBar">fooBar</div>
</div>    

</body>
</html>