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