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}在不同寬度屏幕上的不同位置呈現

回答

相關問題