如何为所有屏幕尺寸右对齐滑出面板？

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/