Question

我有以下html结构：

<div id="main" style="position: relative; width: 900px;">
    <div id="wrapper" style="padding: 40px;">
        <div id="newdiv" style="position: absolute;">
            Some content
        </div>
        <div id="existingdiv">
            Some existing content
        </div>
    </div>
</div>

我可能错过了一些css，但基本上结果是main有一个固定宽度，包装器是相同的宽度减去填充，existingdiv与包装器的宽度相同，而newdiv具有其中内容的宽度。我正在处理一个插件，所以html / css可能会有所不同，但我对这个特殊情况有困难。

newsiv由js插入，我试图将其右侧与existingdiv的右侧对齐。 newdiv中的内容会发生变化，因此通过设置newdiv的“正确”属性来实现这一点是有意义的。然而，确定这应该是什么价值证明是困难的。

使用jQuery的position（）方法返回正确的顶部和左侧（40px）偏移量。我找不到使用jQuery的方法来返回offsetParent的整个宽度。我不得不恢复常规的javascript：

var el = document.getElementById('existingdiv');
var right = el.offsetParent.offsetWidth - el.offsetWidth - el.offsetLeft;
$('#newdiv').css('right', right);

我也尝试过使用jQuery UI的扩展位置方法，但是这似乎计算了newdiv相对于文档的位置，但是这些值是相对于'main'的，所以它最终位于错误的位置。

这是做我想做的最好的方式，还是我错过了什么？这适用于所有情况/浏览器还是可能存在其他问题？

Answer 1

您是否因为填充而遇到问题？您可以使用.outerWidth（）来包含填充，边框和可选边距。 outerWidth API

Answer 2

我认为使用jQuery最接近的是：

var el = $('#existingdiv');
$('#newdiv').css('right', el.offsetParent().width() - el.outerWidth() - el.position().left);

获得底部可以达到同样的目的：

$('#newdiv').css('bottom', el.offsetParent().height() - el.position().top);

这些将把newdiv的右下角定位在existingdiv的右上角。

我不认为我可以使用其他现有的jquery方法更好地获取此信息，这可能非常有用于jquery（或jquery ui）本身。

在jQuery中获取元素相对于其偏移父元素的正确偏移量

2 个答案: