0

我现在正在使用 960 网格系统，如何使用宽度为 940 像素的 960 网格系统创建居中容器，然后将左侧边距和右侧边距设置为 10 像素。

我使用网格检查了站点，它们的容器似乎是 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 像素？

4

2 回答 2

2

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

于 2013-05-20T13:44:58.253 回答
1

更新

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

如果您使用的是http://960.gs网格系统，则提供了两个类来删除多余的边距：（.alpha删除左边距）和.omega（删除右边距）。因此，您的 HTML 将如下所示（这是一个小提琴）：

<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已经满足您的要求。听起来您对容器和网格感到困惑。

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

Agrid是具有指定宽度的嵌套元素（取决于指示的大小，即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

于 2013-05-20T14:30:23.213 回答