0

Facebookの通知リスト（「下の画像を参照」）またはstackoverflow通知のようにしたい


ここに画像の説明を入力"）

**しかし、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();
    });​
4

1 に答える 1

3

これを解決する最も簡単な方法は<div id="notificationRegionWrapper">...</div>、ドロップダウンを開くためのリンクを含むdiv内に配置することです。

#notificationRegionWrapper次に、相対測位を使用して絶対測位を使用する代わりに。そうすれば、ドロップダウンは常にリンクに対して相対的に配置され、すべての画面サイズで同じようになります。

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

親divも指定する必要があることに注意してくださいposition:relative;。

于 2012-08-01T11:20:50.970 に答える