Question

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

我使用网格检查了网站，似乎他们的容器是940px。我用Google搜索，这似乎是因为边距左边距和右边距可能是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）左右为10px？

Answer 1

960 Grid使用类似.grid_2 .grid_3 ... .grid_n

的类

<强> 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

Answer 2

<强>更新

您是否因为额外的10px左/右边距而问及如何嵌入容器而不会弄乱宽度？

如果您正在使用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>

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

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

2 个答案: