HTML在不同的屏幕

Question

我要讓像Facebook通知列表（「見下圖」） 或者計算器通知

「）

「左」屬性**但是，當我改變離開值在CSS中以不同的屏幕改變（寬或正常）**

怎麼辦，請檢查下面的代碼

的HTML代碼

<div style="float:right;text-align:right;margin-right:10px;width: 113px;"> 
    <a class ="notifications" > 
     Press here 
    </a> 
</div> 

<div id="notificationRegionWrapper" style="margin-left: 0px; left: 0px;"> 
    <div id="notificationRegion" class=""><div id="notificationDropHeader"> 
      <div id="notificationDropHeaderText" style="padding-top: 6px;"> 
       Notification List 
      </div> 
     </div> 
     <div class="notification_item" style="opacity: 1;"> 
      <div class="notification_item_desc"> 
       <p class="notification_item_title"> 
        Test One 
       </p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS是這裏

#notificationRegionWrapper{ 
    background: none repeat scroll 0 0 white; 
    box-shadow: 0 0 12px #888888; 
    display: none; 
    margin-left: 223px; 
    max-height: 70%; 
    overflow-x: hidden; 
    overflow-y: auto; 
    position: absolute; 
    top: 137px; 
    width: 360px; 
    z-index: 10; 
    } 

    #notificationRegion #notificationDropHeader { 
    background-color: white;      
    border-bottom: 1px solid #C5C5C5; 
    height: 30px; 
    width: 100%; 
} 
#notificationRegion .notification_item { 
    background: -moz-linear-gradient(center top , #F9F9F9, #EBEDEE) repeat scroll 0 0 transparent; 
    border-bottom: 1px solid #C5C5C5; 
    border-top: 1px solid white; 
    cursor: pointer; 
    display: table; 
    min-height: 70px; 
    padding-bottom: 10px; 
    width: 100%; 
} 
#notificationRegion .notification_item .notification_item_pic { 

    float: right; 
    height: 51px; 
    margin: 12px; 
    width: 51px; 
} 
#notificationRegion .notification_item .notification_item_desc { 
    float: left; 
    margin: 10px 0 0 1px; 
    width: 77%; 
} 
#notificationRegion .notification_item .notification_photo { 
    border-radius: 15px 15px 15px 15px; 
    height: 51px; 
    width: 51px; 
} 
#notificationRegion .notification_item .notification_item_desc .notification_item_time { 
    color: #777777; 
    font-size: 10px; 
    float: right; 
} 

JQuery的位置：

$(document).on('click',".notifications",function(){ 
    $("#notificationRegionWrapper").show(); 
    });​ 

Answer 1

來解決，這將是把<div id="notificationRegionWrapper">...</div>裏面最簡單的方法包含打開下拉鍊接的div。

然後不使用絕對定位#notificationRegionWrapper使用相對定位。這樣，下拉菜單將始終相對於鏈接定位，並且在所有屏幕尺寸上都會相同。

例如：http://jsfiddle.net/Eeqrm/

注意到你還需要給母公司DIV position:relative;。