html - 如果主体容器本身为 940px，我该如何正确使用 960 网格系统？

Question

我现在使用的是 960 网格系统，如何使用 960 网格系统使容器居中，其宽度为 940px，然后将 margin-left 和 margin-right 设置为 10px。

我使用网格检查了网站，它们的容器似乎是 940 像素。我用谷歌搜索，似乎那是因为 margin-left 和 margin-right 可能是 10px。我对此有点困惑，我希望左右各有 10px。

问题:

使用下面的代码，如果容器是 940 像素，我怎样才能将 margin-left 和 margin-right 设置为 10px 以及如何将容器居中？

这是我目前所拥有的: HTML:

 <div class="container container_12 grid_12"> </div>
 </div>

CSS:

My Class
.container {
background-color: #999;
margin-top: 130px;
min-height: 320px;
overflow: auto;
}

下图来自960网格系统:

body {
  min-width: 960px;
}

Grid >> 12 Columns

.container_12 .grid_12 {
  width: 940px;
}
.container_12 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

Grid >> Global


.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

我如何使用 container_12 和其他网格之一(从 1-12)使左右为 10px？

Answer 1

960 网格使用来自 .grid_1 ... .grid_12(最大列数)的类

CSS

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

看看http://960.gs/demo.html