我正在尝试使用jQuery offset()
方法将元素相对于另一个元素放置,我试图找出$(window).resize
函数无效的原因。
JSBIN:http://jsbin.com/lanako/7/edit?html,js,output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
div{
display:inline-block;
position:relative;
height:200px;
width:200px;
border:solid black;
}
#somepara{
border: solid blue;
position:relative;
left:20%;
}
</style>
<body>
<div id ="first"> FIRST</div>
<div id = 'somepara'> </div>
</body>
</html>
JavaScript的:
var p = $( "#somepara" );
var pf = $('#first');
var offset = p.offset();
p.html( "left: " + offset.left);
function offcss(){
pf.css({'left': offset.left + 6 + "px"});
}
$(document).ready(function(){
offcss();
$(window).resize(function(){
offcss();
});
});
我基本上抓住第二个元素offset().left
的{{1}}并尝试将('#somepara')
的css设置为距('#first')
右6个像素。注意:{{1} }具有流体测量值(%),因此左侧位置发生变化。
该等式最初有效,但我希望在调整浏览器大小时,使用等式(#somepara)
,它计算要执行的(#somepara)
的css left属性。不幸的是,我设置的pf.css()
函数不起作用,因此(#first)
的左属性不变。我想要的最终目标是无论浏览器大小如何,元素将被分隔6个像素($(window).resize
与(#first)
相差6个像素)。
非常感谢任何帮助!
答案 0 :(得分:1)
调整大小时#somepara
的位置会发生变化,因此每次调用p.offset()
函数时都需要取offcss()
的值(而不仅仅是首次加载时)。< / p>
function offcss() {
pf.css({'left': p.offset().left + 6 + "px"});
}
关于调整大小,它似乎完全符合您的要求。