2

如果有一个 div 说

<div style="position:absolute;top:0%;left:94%;width:40px;height:40px;"/>

当在不同的屏幕分辨率上查看时，94% 开始向右滑动，这是正常行为。

div 是相对于文档的，所以当窗口调整大小时，我希望它与窗口一起移动。

我希望我说得通。正如我现在拥有的那样，它靠近我放置它的位置，但是随着屏幕变大或以更高的分辨率查看文档，它开始发生变化。

问题：当屏幕尺寸/分辨率发生变化时，我怎样才能用百分比绝对定位 div 并使其保持在正确的位置。

编辑： 这是我想要做的。我正在编写一个应用程序，用户可以在其中从工具箱中选择一些项目，拖放到类似于 Visual Studio 的窗口上，但结果不是其 HTML 页面的表单。我得到了所有这些工作，它工作得很好。当我开始在不同的屏幕和分辨率上进行测试时，我的问题就开始了，最终结果总是与用户用于创建 html 页面的屏幕不同。页面中的每一件事物都是绝对定位的，除了相对的主要内容区域，它包含所有绝对定位的项目。

我尝试的是屏幕上项目的剩余百分比和最高值，这就是导致我最初的问题的原因，在计算我自己的值的建议下我尝试了这个

var currH = $(window).height();
var currW = $(window).width();

var rW = currW / OrgWidth; //Orignal Width of the window when the item was placed

var rH = currH / OrgHeight; //Orginal height of the window when the item was placed 

var x =$("#Button_Tools").offset().left * rW;
var y =$("#Button_Tools").offset().top * rH;

$("#Button_Tools").css("left", x.toString() + "px");
$("#Button_Tools").css("top", y.toString() + "px");

我在窗口第一次加载时计算这个，它将按钮移动到百分比值移动到的完全相同的位置。

我究竟做错了什么？任何接受者。

4

1 回答 1

2

您不能用百分比绝对定位 div 并期望它在每个屏幕上的行为都相同。由于您使用的是百分比，因此该值将与屏幕大小成正比。1000 的 94% 与 1500 的 94% 不同。

您可以设置右属性而不是左属性，例如：

<div style="position:absolute;top:0%;right:20px;width:40px;height:40px;"/>

您还可以根据页面的当前宽度在页面加载事件中计算此值，这样即使调整窗口大小，您也可以保证位置相同。

于 2013-05-23T22:37:40.637 回答