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

Question

我正在看这个3 fixed-column CSS layout在 http://www.vanseodesign.com .我想使用此布局，但我想在调整浏览器大小时更改它的行为方式。

当浏览器打开得很好并且很宽时，列在页面上很好地居中:

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

我想做的是更改 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 sample code