我想制作 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();
});