1

我使用 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 像素的宽度。它只会走 940px 宽度。

4

2 回答 2

5

警告: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>
于 2011-12-12T14:05:21.530 回答
0

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

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

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

下面的示例每边都有一个 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>
于 2011-08-06T00:50:40.733 回答