如果 body 容器本身是 940px，我如何正确使用 960 网格系统？答案

【问题标题】：How do I correctly use the 960 grid system if the body container itself will be 940px?如果 body 容器本身是 940px，我如何正确使用 960 网格系统？
【发布时间】：2013-05-15 02:05:44
【问题描述】：

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

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

问题：

如果容器为 940px，如何使用下面的代码在 10px 处设置 margin-left 和 margin-right 以及如何使容器居中？

这是我目前所拥有的： 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）使左右为 10 像素？

【问题讨论】：

您是否定义了装订线宽度？您可以尝试将其设置为 0 排水沟宽度。
您尝试过使用 .container_12 吗？我看到 css 是这样定义的： .container_12, .container_16 { margin-left: auto;边距右：自动；宽度：960px； }
谢谢我的困惑。如果 container_12 的左右设置为 auto，那么我将使用另一个定义了它的网格。不会引起冲突吗？
我需要将容器居中，这就是为什么我也有边距：70px auto
@chrisvillanueva 我用我正在寻找的内容更新了我的问题。我很感激帮助。我是新手，迷路了。

标签： html css 960.gs

【解决方案1】：

960 Grid 使用 .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

【讨论】：

谢谢本尼迪克特。看到我的问题，我更新了。我怎样才能将这些东西一起使用？
最好左右留10PX的margin，不然内容会撞到浏览器chrome。

【解决方案2】：

更新

您是否在问如何嵌套容器而不会因为左右边距的额外 10 像素而弄乱宽度？

如果您使用http://960.gs 网格系统，则提供了两个类来删除多余的边距：.alpha（删除左边距）和.omega（删除右边距）。因此，您的 HTML 将如下所示 (here's a fiddle)：

<div class="container_12">
    <div class="grid_12 alpha omega">
        <div class="container_16">
            <div class="grid_16">
                <h1>Nested 16 Column Grid</h1>
            </div>
        </div>
    </div>
</div>

原始答案

我对您的问题有点困惑，因为此处提供的 960 网格系统 http://960.gs 已经满足您的要求。听起来您对容器和网格感到困惑。

container 定义为 960px 宽，margin-left: auto; margin-right: auto 保持居中；不需要额外的边距和填充。它应该是网格结构的最外层父级。

grid 是具有指定宽度（取决于所指示的大小，即grid_12）和margin-left: 10px; margin-right: 10px 的嵌套元素。

所以你的 HTML 应该是这样的结构：

<body>
  <!-- container is centered and has a width of 960px -->
  <div class="container_12">
    <!-- row is 940px with 10px left/right margin -->
    <div class="grid_12">
    </div>

    <!-- entire row is still 940px, but each column is 460px each with 10px left/right margin -->
    <div class="grid_6">
    </div>
    <div class="grid_6">
    </div>
  </div>
</body>

因此，容器的宽度始终为 960 像素，但由于左右边距，网格可以达到的最大宽度为 940 像素。有关更多信息，请阅读 CSS 框模型：http://www.w3.org/TR/CSS2/box.html

【讨论】：