如何在调整大小时让浏览器边框锁定到div？

Question

我正在http://www.vanseodesign.com上查看这3个固定列CSS布局.我想使用这个布局,但是当我调整浏览器大小时,我想改变它的行为方式.

当浏览器打开时,页面上的列很好地居中:

然后我们减小浏览器的宽度,它锁定到最左列的左侧,如下所示:

我想要做的是更改CSS(或必要时的javascript),以便当浏览器变得太窄时浏览器锁定到中间列的左侧:

我不知道如何实现这个目标？任何人都可以建议如何更改代码,最重要的是为什么您的解决方案有效？

编辑:

对于那些阅读这个问题的人:我将Salem Ouerdani的答案标记为正确答案,因为他是第一个以我想要的特定方式运作的解决方案.然而,很明显人们以稍微不同的方式解释问题.所以值得一读,因为有一些非常好的答案可能更适合你的情况.请你这样投票.

Answer 1

尝试修改您的容器 div:

#container { width: 960px; margin: 20px auto;}

对此:

#container {
  width: 960px;
  margin: 20px auto;
  position: absolute;
  left: 50%;
  margin-left: -480px; /* half the fixed width */
}

编辑: 此外,您需要添加此项,以便在浏览器大小超出固定的960px时锁定到中心div的左侧:

@media (max-width: 960px) {
    #container {
        left: 0;
        margin-left: -240px; /* Primary Sidebar width */
    }
}

更新:正如@media (max-width: 480px){}更好地解决问题而不是960px我将相关的代码笔示例添加到最终解决方案:

>> Codepen示例代码

Answer 2

更新2015-08-03 01:59 +0000

阅读关于保持居中的另一个答案的评论,直到中心列的左边缘符合浏览器边缘,这使得事情更加清晰.

这将使中间列保持居中,直到浏览器与列一样大,然后它将粘附到列的左边缘.

html, body {
    margin:0;
    padding:0;
}

@media (max-width: 480px) {
    #container {
        margin-left:-240px;
    }
}

@media (max-width: 960px) and (min-width:481px) {
    #container {
        margin-left:calc( (960px - 100%) / -2 );
    }
}

原来的anwser

纯净的CSS.应调整"960"和"720"的值以考虑身体边缘.在Firefox下工作,在其他地方无法保证.使用calc()基于浏览器的宽度自适应负余量.

/* fixed negative margin below 720px width */
@media (max-width: 720px) {
    #container {
        margin-left:-240px;
    }
}

/* adaptive negative margin vetween 720px and 960px width */
@media (max-width: 960px) and (min-width:721px) {
    #container {
        margin-left:calc( (960px - 100%) * -1 );
    }
}

预习

Answer 3

修订后的解决方案(基于OP 评论)

@spenibus解决方案是最好的,我建议.该解决方案不适用于浏览器<= IE9(IE9仅部分支持它).如果你想让它跨浏览器兼容,那么我建议使用javascript手动设置滚动.

小提琴:http://jsfiddle.net/dp7gwcn5/4/

$(function () {
    $(window).resize(function () {
        var width = $(window).width();
        if (width <= 960) {
            if(width <= 480) $(document).scrollLeft($('#content').offset().left);
            else $(document).scrollLeft((960-width) / 2);
        }
    });
});

旧解决方案

解决方案#1(滚动:不要隐藏任何东西,只是坚持)

如果您希望通过滚动仍然可以访问侧栏,但只能使浏览器的左边缘粘在主要内容的左边缘#content.然后操纵滚动

小提琴:http://jsfiddle.net/dp7gwcn5/.小提琴将允许您更改预览窗口的大小,只要您将其缩小到足以隐藏辅助侧边栏,窗口紧贴到左边缘#content

$(function(){
    $(window).resize(function(){
        if ($(window).width() < 720) {
            $(document).scrollLeft($('#content').offset().left);
        }
    });
});

注意:宽度720是根据您在侧边栏和视锥上设置的宽度给出的,如果您愿意,可以将其修改为即时计算.

解决方案#2(静态:隐藏主侧边栏)

如果您希望隐藏主要侧边栏,则只需在窗口大小较小时使用媒体查询隐藏主要侧边栏

小提琴:http://jsfiddle.net/dp7gwcn5/1/

@media all and (max-width:720px) {
    #primary {
        display:none;
    }

    #container {
        width:720px;
    }
}

解决方案#3(动态:隐藏主要侧边栏)

解决方案#2是静态的,你可以做的很少,但是,如果你想动态计算宽度并隐藏侧栏,请使用脚本

小提琴:http://jsfiddle.net/dp7gwcn5/2/

脚本

$(function(){
    $(window).resize(function(){
        if ($(window).width() < 720) $('#container').addClass('small');
        else $('#container').removeClass('small');
    });
});

CSS

#container.small {
    width:720px;
}

#container.small #primary {
    display:none;
}

我的建议

我的建议是如果您不希望使其与移动设备兼容,请使用解决方案#1.如果您希望使其与移动设备兼容,我建议使用解决方案#2和菜单按钮来显示您的主要侧边栏.

注意:解决方案#1和解决方案#3适用于大多数浏览器.解决方案#2不适用于浏览器<IE9

Answer 4

从我所看到的,此模板使用容器中的margin 0 auto.设置边距的方式,它将包含所有三列的"容器"居中.这意味着当前通过将三列中的每一列视为一个大列来居中.

这种布局也没有响应.这意味着它无法适应更大或更小的浏览器大小.它有一个固定的宽度和高度.

一个简单的解决方案是将像素单位更改为%.这将创建一个流畅的布局,可以更轻松地适应浏览器大小,因为测量基于窗口大小的一部分而不是固定大小.

例如:

body {

width: 50%; } 

无论浏览器窗口的大小是多少,主体只占一半大小.

如果您希望所有三列都在完全相同的布局中可见,或者只是在浏览器中可见而无需滚动到一侧,无论设备或屏幕大小如何,那么您需要使用媒体查询.媒体查询是css属性,可让您为特定分辨率或屏幕大小设置特定的CSS样式.

例如:

@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}

@media screen and (max-width: 600px) {
    body {
        background-color: purple;
    }
}

在我的例子中(尽管非常粗糙),身体的背景将是紫色的,小到600px.然后它将变为蓝色,直到300px的大小.

您可以在此处阅读有关媒体查询的更多信息:http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 5

1 - 从您的BODY CSS中删除边距.

2 - 将所有html包装在一个包装器中...所有你的身体内容

3 - 为包装器定义CSS:

这将把所有内容放在一起,以页面为中心.

#conatiner{
    margin-left:auto;
    margin-right:auto;
    width:960px;
}