如何為所有屏幕尺寸右對齊滑出面板？

Question

我試圖將面板正確對齊，以便它與引導程序一起使用，因此它適用於所有屏幕尺寸。 左對齊適用於所有屏幕尺寸。 如何使這項工作正確對齊？

小提琴

使用Javascript

 $('#opener').on('click', function() {                          
                                var panel = $('#slide-panel');
                                if (panel.hasClass("visible")) {
                                                panel.removeClass('visible').animate({'margin-left':'100%'});
                                } else {
                                                panel.addClass('visible').animate({'margin-left':'90%'});
                                }             
                                return false;      
                });

CSS

#slide-panel {
    width:300px;
    height:300px;
    padding:10px;
    background:#eee;
    margin-left:100%;
}
#opener {
    float:left;
    margin:-10px -50px 0px -50px;
    border-radius:0;
}

HTML

<div id="slide-panel">
    <a href="#" class="btn btn-danger" id="opener"><i class="glyphicon glyphicon-align-justify"></i></a>
    Panel Content
</div>

Answer 1

可以通過以下步驟完成側面板的制作：

• 使面板position: absolute或position: fixed
• 使面板top: 0 ， right: -N ，其中N是面板的寬度
• 要顯示面板中設置right以0
• 要使其沒有滾動條，請設置overflow-x: hidden在正文和html上

僅在側面板的寬度恆定時才有效。

這是小提琴： http : //jsfiddle.net/acbabis/ZnNHk/