div {position：absolute}在不同宽度屏幕上的不同位置呈现

我用jQuery animate()函数制作了滑动（S）窗口。即它向左和向右滑动。div {position：absolute}在不同宽度屏幕上的不同位置呈现

$.animate({width:'toggle', opacity:'toggle'},2000,'swing',function(){ 
    // ... 
})

它在打开时使用以下CSS。

position:absolute; 
height: 496px; 
width: 694px; 
left:36px; 
top:124px;

我面临的问题是：在不同宽度的屏幕上，窗口从不同的位置开始。我应该显示它靠近另一个窗口（A）。在我的笔记本电脑上工作正常。在客户端，它与窗口A的一半重叠。我相信这是由于position:absolute;，但我不知道如何解决它。请帮忙！谢谢！

来源

2012-02-11 a_fan

非常感谢答案家伙！非常感激。

@阿里youhannaei的回答给了我一个想法，使用下面的代码：

var pos = jQuery("#div_a").offset(); // Window A's position 
var x = pos.left + jQuery("#div_a").width(); // Window S's position

与postion:absolute;设置left:x;的画面S，将工作。

来源

2012-02-13 11:06:55

不同尺寸的屏幕有不同的分辨率。所以，在您的计算机上，100px可能是屏幕的中心，但在别人的屏幕上可能不是。使用％而不是px可能对你更好。

来源

2012-02-11 09:11:05

您可以尝试

float:right;

漂浮该对象只是沿着一侧的窗口。您需要在此处发布完整的代码才能告诉分部标记的位置。否则，你可以搜索float属性在W3Schools

来源

2012-02-11 09:29:07 daerty0153

浮动工作的位置：绝对？ – 2012-02-11 11:46:57

nope。有时特别是在不同宽高比的屏幕上，有时会出现百分比不正确的情况。那么div标签需要相应地放在html中。 – daerty0153 2012-02-11 11:57:25

可以使用$("body").height();也$("body").scrollTop()获得页面的客户端窗口高度和位置来查看，在你的代码，你有你的幻灯片的高度。减少你的滑动高度。您现在可以在页面中心显示幻灯片。像这样：

var top = $("body").scrollTop() + ((parseInt($("body").height()) - slideHeight)/2);

来源

2012-02-11 09:44:00

如果此动画或位置：绝对属性应用的div有父div，则应用position：relative。

<div class="wrapper"> 
    <div class="slider"></div> 
</div> 

css: 
.wrapper{ position:relative;} 
.slider{ 
position:absolute; 
height: 496px; 
width: 694px; 
left:36px; 
top:124px; 
}

来源

2012-02-11 10:46:52 Abhidev

div {position：absolute}在不同宽度屏幕上的不同位置呈现

回答

相关问题