960 css框架，alpha / omega问题

Question

我正在使用960 css框架。问题是我试图在3列布局中使用完整的960宽度。所以我使用容器16并使用带网格的3个div。第一个和最后一个网格Im使用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之外的所有样式，我仍然有同样的问题。无论我怎样才能达到整个960px的宽度。它的宽度只有940px。

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

由于左右列宽为160像素，因此它们的左右边距为10-10像素，即额外20像素。中心列宽580px，边距也有10-10px。

所以 160 + 10 + 160 + 10 + 580 + 20 = 940px

您选择的3列布局是20px更薄。

以下示例的每侧都有一个10-10 px的排水沟，所以它已经死了。

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