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

这是一个截图o问题,你可以看到蓝色的最后一个div并没有一直向右.我究竟做错了什么？

UPDATE

我尝试删除除了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>