jQuery 如何将一个 div 动态定位在另一个下方？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1850732/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position a div dynamically below another?
提问by Fred
I'm trying to use jQuery to detect the position of a div (#olddiv), so I can use that position to place another div (#newdiv) exactly below it. The right borders of the 2 divs are aligned (right border).
我正在尝试使用 jQuery 来检测 div ( #olddiv)的位置，因此我可以使用该位置#newdiv在其正下方放置另一个 div ( )。2 个 div 的右边框对齐（右边框）。
I'm trying to get the #olddivbottom and right locations to use them as the #newdivtop and right borders. I've used this code, but it's not working. Any idea what I'm doing wrong?
我正在尝试获取#olddiv底部和右侧的位置以将它们用作#newdiv顶部和右侧的边框。我已经使用了这段代码，但它不起作用。知道我做错了什么吗？
var right = $('#olddiv').position().right;
var top = $('#olddiv').position().bottom;
$('#newdiv').css('top', right);
$('#newdiv').css('right', top);
Also, I'm not sure if positionis what I need. I think this can be done with positionor offset, but I'm not sure:
另外，我不确定是否position是我需要的。我认为这可以用positionor来完成offset，但我不确定：
$('#ID').position().left
$('#ID').offset().left
Thanks
谢谢
回答by Jared
I've used offset() to position elements dynamically. Try this:
我已经使用 offset() 来动态定位元素。尝试这个：
var offset = $('#olddiv').offset();
var height = $('#olddiv').height();
var width = $('#olddiv').width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";
$('#ID').css( {
'position': 'absolute',
'right': right,
'top': top
});
also don't forget to bind this to the window.onresizeevent if you need it to scale when the user resizes the window.
window.onresize如果您需要在用户调整窗口大小时缩放它，也不要忘记将此绑定到事件。
UPDATE:another thought - does this have to be positioned absolutely? Why not just insert the div after the other in the DOM?
更新：另一个想法 - 这是否必须绝对定位？为什么不直接在 DOM 中的另一个之后插入 div？
$('#olddiv').after($('#ID').html());
then just make sure they are the same width.
然后确保它们的宽度相同。
回答by PetersenDidIt
回答by yoda
I've used that in a website I made, to display a div in a certain position, always relative to another div and always relative to the dimensions of the browser window (even when you stretch it manually).
我在我制作的网站中使用了它，在某个位置显示一个 div，总是相对于另一个 div 并且总是相对于浏览器窗口的尺寸（即使你手动拉伸它）。
Here's the code:
这是代码：
// function to place the div
var newdiv = function () {
var o = $('#olddiv').offset();
var h = $('#olddiv').height();
var w = $('#olddiv').width();
$('#newdiv').css({'top': o.top,
'left': o.left,
'width': w,
'height': h
}).show();
}
// listen the window changes and correct the newdiv position
$(window).resize(function(){ newdiv(); });
// display the newdiv after DOM is loaded, or whenever you want
newdiv();
Note that you may need to add another vars to the css above, like margin, padding, etc, in order to get the right position, or even add manually values to top and left, in case the new div isn't exactly like the old one.
请注意，您可能需要在上面的 css 中添加另一个变量，例如边距、填充等，以获得正确的位置，或者甚至在顶部和左侧手动添加值，以防新的 div 不完全像旧的。
回答by Arne Roomann-Kurrik
Looks like a typo, does fixing:
看起来像一个错字，修复：
'top', right
'right', top
help at all?
有帮助吗？
The divs need to be positioned absolutely or relatively in order for this code to work as well.
div 需要绝对或相对定位，以便此代码也能正常工作。
