960 css 框架，alpha/omega 问题

Question

我使用的是 960 css 框架。问题是我试图在 3 列布局中使用完整的 960 宽度。所以我使用容器 16 并使用 3 个带网格的 div。第一个和最后一个网格我使用 alpha 和 omega 删除左右装订线。它正在删除 alpha 排水沟，但不是 omega 排水沟。这是html：

<div class="container_16" id="section_body">
    <div class="grid_3 alpha" style="background:red;">body left</div>
    <div class="grid_10" style="background:green;">body</div>
    <div class="grid_3 omega" style="background:blue;">body right</div>
</div>

部分正文的css是：

#section_body {
    min-height:500px;
    overflow:hidden;
    background:#fff;
}

这是问题的屏幕截图，您可以看到最后一个蓝色的 div 并没有一直向右。我做错了什么？

更新

我尝试删除除 960 css 和 3 个 div 之外的所有样式，但我仍然遇到同样的问题。无论如何，我都无法让它达到整个 960 像素的宽度。它的宽度只有 940 像素。

Answer 1

警告： Jauzsika 的代码中有一个拼写错误（“grid16”而不是“grid_16”），即使它不应该也可以工作（因为“container_16”和缺失的“alpha”）。

正确答案：

有两点需要牢记：

1) 按照设计，960gs 的左右边距为 10px，即实际内容区域只有 940px 宽。

2) 当使用嵌套网格时，并且仅在这种情况下，子元素需要特殊的类。第一个孩子需要一个“alpha”类，最后一个孩子需要一个“omega”类。

由于您的代码中没有子 div，因此您不需要“alpha”和“omega”。

因此，两种解决方案是等效的（更正的代码）：

<div class="container_16" id="section_body" style="background-color:#CCCCCC">
    <div class="grid_3" style="background:red;">body left</div>
    <div class="grid_10" style="background:green;">body</div>
    <div class="grid_3" style="background:blue;">body right</div>
</div>

<div class="container_16" id="section_body" style="background-color:#CCCCCC">
<div class="grid_16">
    <div class="grid_3 alpha" style="background:red;">body left</div>
    <div class="grid_10" style="background:green;">body</div>
    <div class="grid_3 omega" style="background:blue;">body right</div>
</div>
</div>

Answer 2

因为左右列宽都是160px，所以它们的左右边距是10-10px，也就是额外的20px。中心栏宽 580 像素，也有 10-10 像素的边距。

所以 160+10+ 160+10+ 580+20 = 940像素

您选择的 3 列布局薄了 20 像素。

以下示例在每一侧都有一个 10-10 像素的装订线，所以它是死点。

<div class="container_16" id="section_body" style="background-color:#CCCCCC">
<div class="grid16">
    <div class="grid_3" style="background:red;">body left</div>
    <div class="grid_10" style="background:green;">body</div>
    <div class="grid_3 omega" style="background:blue;">body right</div>
</div>
</div>