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

我正在看这个。我想使用此布局，但是我想更改调整浏览器大小时它的行为方式

当浏览器打开且宽时，列在页面上居中：

然后我们减小浏览器的宽度，并将其锁定在最左侧列的左侧，如下所示：

#container {
    position: absolute;
    left: 50%;
    width:960px;
    margin-left: -480px;
    margin-top: 20px;
    margin-bottom: 20px;
    -webkit-transition: margin-left 1s ease-in-out;
    -moz-transition: margin-left 1s ease-in-out;
    -o-transition: margin-left 1s ease-in-out;
    transition: margin-left 1s ease-in-out;
}

我想做的是更改CSS（或javascript，如果需要），以便在浏览器变得太窄时，浏览器锁定到中间列的左侧：

但我不知道如何实现这一点？？有人能建议如何更改代码，最重要的是，为什么您的解决方案有效

编辑：

---

对于阅读此问题的读者：我将Salem Ouerdani的答案标记为正确答案，因为他是第一个以我想要的方式回答问题的人。然而，人们对这个问题的理解显然略有不同。所以值得一读，因为有一些非常好的答案可能更适合你的情况。请按原样投票。

从我看到的情况来看，此模板使用容器中的边距0自动。设置边距的方式是将包含所有三列的“容器”居中。这意味着内容目前以三个栏目中的每一个作为一个大栏目为中心

这种布局也没有响应性。这意味着它不能适应较大或较小的浏览器大小。它有固定的宽度和高度

一个简单的解决方案是将像素单位更改为%。这将创建一个流体布局，该布局将更容易适应浏览器大小，因为测量基于窗口大小的一部分，而不是固定大小

例如：

body {

width: 50%; } 

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

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

无论浏览器窗口的大小如何，主体仅占一半大小

如果您希望在完全相同的布局中显示所有三列，或者无论设备或屏幕大小如何，都只在浏览器中显示而不滚动到旁边，则需要使用媒体查询。媒体查询是css属性，可用于为特定分辨率或屏幕大小设置特定css样式

例如：

body {

width: 50%; } 

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

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

在我的示例中（虽然非常粗糙），主体的背景将为紫色，最大尺寸为600px。然后它将变为蓝色，直到大小达到300px

您可以在此处阅读有关媒体查询的更多信息：

尝试从此处修改您的容器div：

#容器{宽度：960px；边距：20px自动；}

为此：

#容器{
宽度：960px；
保证金：20px自动；
位置：绝对位置；
左：50%；
左边距：-480px；/*固定宽度的一半*/
}

---

编辑： 此外，您还需要添加此选项，以便在浏览器大小超过固定960px时锁定到中间div的左侧：

@介质（最大宽度：960px）{
#容器{
左：0；
左边距：-240px；/*主边栏宽度*/
}
}

---

更新：由于

@media（最大宽度：480px）{}

比

960px

更好地解决了问题，因此我将添加相关的代码笔示例和最终解决方案：

更新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 );
    }
}

预览

---

您可以通过媒体查询轻松完成此操作

在CSS的底部，只需添加如下内容：

@media screen and (max-width : 960px) {

    #container {
        margin-left: -260px;
    }

}

当窗口大小小于960px时，它将按左列的宽度向左移动容器，使其固定在中间列的左侧

这是一把小提琴：

编辑：

通过添加CSS转换，您可以使用这样的方式使事情变得更平滑

在CSS的底部添加一个媒体查询：

@media (max-width : 960px) {

    #container {
        left: 460px;
        margin-left: -700px;
    }

}

然后在前面CSS中定义容器时，使用如下内容：

#container {
    position: absolute;
    left: 50%;
    width:960px;
    margin-left: -480px;
    margin-top: 20px;
    margin-bottom: 20px;
    -webkit-transition: margin-left 1s ease-in-out;
    -moz-transition: margin-left 1s ease-in-out;
    -o-transition: margin-left 1s ease-in-out;
    transition: margin-left 1s ease-in-out;
}

当然，我可以通过调整价值观/时间来获得你想要的东西，但这种通用方法在我这方面是有效的

更新的JSFIDLE:

编辑2：

现在应该可以按预期工作了

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

#container {
position: absolute;
width: 960px;
left: 50%;
margin-left: -480px;
margin-top: 20px;
margin-bottom: 20px;
}

---

我建议将

#容器始终置于

position: absolute;
left: 50%;
transform:translateX(-50%);

然后，当它只适合中柱和1柱
（最大宽度：720px）
时，请固定位置：

@media (max-width: 720px) {
    #container {
        left:240px;
        transition: left 2s;//make it smooth 
    }
}

疯狂选项卡大小调整器的一个优点是添加过渡，以动画化更改
过渡：左2（但考虑到“普通”用户，可能没有必要这样做）

1-从你的身体CSS中删除边距

2-将所有html包装在包装器中。。。全身心满意足

3-定义包装的CSS：

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

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

它肯定会起作用。
修改后的解决方案（基于OP）
是最好的，我推荐。该解决方案不适用于浏览器
用css试试这个
或者在脚本中使用

  function enableScrolling()
        {
            document.body.scroll = "yes"; 
            document.body.overflow="hidden";
        }

希望这对您有用。
为什么不使用创建列并使用
列sm-
或
列xs-
将中间容器拉到位

下面是一个例子，你一定要阅读Twitter引导框架，兄弟：

<div class="container">
    <div class="row>
        <div class="col-sm-3">
            <h2>Left</h2>
        </div>
        <div class="col-sm-6">
            <h2>Center</h2>
        </div>
        <div class="col-sm-3">
            <h2>Right</h3>
        </div>
    </div>
</div>


谢谢你详细的回答。然而，我不确定这是否真的回答了我的问题。我不认为我在这个阶段需要一个流畅的布局，因为我有我的背景
#container.small {
    width:720px;
}

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

html, body
    {
       overflow: scroll !important;
       ms-overflow-y: auto; 
       float: none !important; 
       overflow-y: auto; 
       overflow-x: visible; 
    }  

  function enableScrolling()
        {
            document.body.scroll = "yes"; 
            document.body.overflow="hidden";
        }

@media(max-width : 960px)
{
  #primary{width:0;}
  #content{width:66.7%}
  #secondary{width:33.3%}
  #container{width:100%}
}

<div class="container">
    <div class="row>
        <div class="col-sm-3">
            <h2>Left</h2>
        </div>
        <div class="col-sm-6">
            <h2>Center</h2>
        </div>
        <div class="col-sm-3">
            <h2>Right</h3>
        </div>
    </div>
</div>