如何在浏览器窗口的右侧重新定位动态 HTML 元素？答案

【问题标题】：How to reposition a dynamic HTML element on the right side of a browser window?如何在浏览器窗口的右侧重新定位动态 HTML 元素？
【发布时间】：2010-10-15 16:35:13
【问题描述】：

我正在使用 jQuery 在一个函数中执行以下操作：

最初我有一个绝对定位的 DIV；我将 DIV 的内部 HTML 设置为一些需要的文本/HTML；然后我使用 css({top: initialTop,left: initialLeft}) 在某些特定坐标处显示元素。

在页面的左侧和中心区域内一切正常 - 我在请求的坐标处看到左上角的 DIV。

当我想在页面右侧显示元素时，我必须保持 DIV 100% 可见，因此我必须在请求的坐标处显示其右上角（而不是左上角）。我可以毫无问题地获得窗口宽度和滚动偏移量，并且可以计算从 DIV 的左上角减去的偏移量以使其成为右上角 - 我只取 DIV 的宽度并从坐标中减去它。

问题是 - 这种方法仅在我更改 DIV 的内容后第二次才有效。我第一次调用 myDiv.width() 时，它会保留以前的值 - 带有旧文本的 DIV 的宽度。我第二次为同一个元素调用同一个函数时，一切正常。

我听说过一些关于延迟渲染的事情——这似乎发生在我的案例中；在函数退出之前，浏览器不会使用更新的文本呈现 DIV，因此我无法获得正确的宽度。

下面是简化代码：

// at the beginning I have the following style:
#myDiv
{
position: absolute;
top: 0;
left: 0;
}


function PutDivWithInPlace(text, x) {
    var $div = $('#myDiv');
    $div.html(text);

    $div.show(); // even if it worked, I would really like to keep myDiv invisible to avoid it jumping from the old position to the new one

    var width = $div.outerWidth();

    // I ignore x-scroll offset here for simplicity
    // if the right edge of div flows over the window right side, then push it to the left
    if (x + width > $(window).width()) {
        x -= width;
    }

    $div.css({
        left: x
    });

    // this does not work - the width is still from the previous call of PutDivWithInPlace, so myDiv appears at the wrong place :(
}

是否有任何其他方法可以获取 DIV 的右上角，我需要它位于我更改 DIV 内容的相同功能中（但前提是 DIV 确实溢出窗口右侧）？除了使用 DIV 的宽度，即使在延迟渲染之后，也许还有其他一些技巧？

【问题讨论】：

你能把你的代码贴在这里吗？？以便我们对其进行审核。
确实，我们需要查看您正在使用的代码。

标签： jquery html css

【解决方案1】：

我不确定你在问什么，但不能设置

left:auto;
right:someCoordinate;

我觉得应该把它放在右边，不管宽度如何。

【讨论】：

只有一个但是：只有当右上角流过窗口的右侧时，我才需要定位右上角。如果右上角没有走那么远，那么我应该将左上角保持在坐标处。

【解决方案2】：

看来，我找到了一些奇怪的临时解决方案。 DIV 宽度还取决于它即将出现在浏览器窗口中的位置。我不明白，为什么具有相同文本的同一个 DIV 在打开时是 200px 宽，比如 x=100,y=200 但是当我把它放到 x=800,y=200 时，它突然变成 120px 宽。浏览器似乎也考虑了元素的位置，虽然它允许溢出窗口，但它仍然会自动缩小宽度。所以我的代码现在看起来像这样：

function PutDivWithInPlace(text, x)
{
var $div = $('#myDiv');
$div.html(text);

var width = $div.outerWidth();

// this is needed to recalc DIVs width because the browser has resized it depending on x
$div.css({ left: x});

// if the right edge of div flows over the window right side, then push it to the left
if(x + width > $(window).width()){      
    x -= width;
}

// and update css again with new style
$div.css({ left: x});
}

如果我调整浏览器窗口的大小使坐标位于边缘，这适用于测试用例 - 我得到的宽度就像我将 Div 放在这些坐标处一样。当然有一个问题 - 如果宽度很大并且我将它推到左边，那么浏览器可能会决定再次调整 DIV 的大小，就像我在边缘绘制它之前所做的那样。我希望这种情况不会经常发生。仍然没有更好的解决方案:(

【讨论】：