容器移动，同时减少浏览器窗口

Question

我正在使用自己制作的容器，但是，当我调整浏览器窗口的大小时，容器会沿着窗口移动，我希望它在您的位置是静态的。

这是CSS：

.container {
margin-right: auto;
margin-left: auto;
width: 1000px; /* yes, because style of PSD file. need follow design */
}

Answer 1

margin: auto根据其父元素的宽度使.container居中。

.container具有流体宽度（例如100％）的父元素。调整窗口大小时，此元素的宽度会发生变化，因此容器将根据新宽度自动重新定位。

有一些解决方案：

1）将.container包裹在具有固定宽度的元素内，该元素在浏览器调整大小时不会改变。

CSS：

.wrapper-fixed-width {
    width: 500px;
}

HTML：

<div class="wrapper-fixed-width">
    <div class="container bg">The parent element has a fixed width (pixels)</div>
</div>

2）将固定边距大小设置为.container

CSS：

.container {
    margin: 0 50px;
}

这是一个JS小提琴，显示了这些例子：

http://jsfiddle.net/vH49a/4/