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/

如何正确对齐所有屏幕尺寸的滑出面板？

1 个答案: