960 网格系统 - 12 列 - 接触容器边缘答案

【问题标题】：960 Grid System - 12 col - Touching the container edge960 网格系统 - 12 列 - 接触容器边缘
【发布时间】：2013-03-22 20:57:35
【问题描述】：

我正在使用 960 网格系统来尝试创建布局...我有以下代码：

<div class="container_12">
   <div class="grid_3 alpha"></div>
   <div class="grid_9 omega"></div>
</div>

我正在使用 alpha 和 omega 分别删除左边距和右边距。这使 div 能够触摸容器的左边缘。

但问题是右手 grid_9 omega 不接触右手侧。我明白为什么会发生这种情况，但我不知道如何使用 960 方法纠正这种行为..

谢谢，

【问题讨论】：

标签： html css 960.gs

【解决方案1】：

了解 960 网格框架背后的基本原理可能会有所帮助。这个框架基于一个非常简单的原则，它结合了固定宽度和边距来创建一个类似网格的布局，用于快速网站开发。整个框架使用了float: left，它允许网格并排显示，并在每个网格之间创建 20px 缓冲区。因此，我相信您误解了 "alpha" 和 "omega" 类的使用。这些类旨在删除作为其他网格的子网格的边距，从而使边距成倍增加。

以这段代码为例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>960 Grid System &mdash; Demo</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
</head>
<body>

<div class="container_12" style="background:blue;">
   <div class="grid_3 alpha" style="background:yellow;">Grid_3 Alpha</div>
   <div class="grid_9 omega" style="background:green;">Grid_9 Omega</div>
</div>

</body>
</html>

这会产生类似于：您会注意到 Grid_3 的左侧没有边距，但 Grid_3 和 Grid_9 之间有 20 像素的边距。这是由具有margin-right:10px 的Grid_3 和具有margin-left:10px 的Grid_9 引起的。当两个 div 都向左浮动时，它们会产生这个间距。您还会注意到 Grid_9 右侧还有另外 10px 的边距。这是因为左边距已被移除到 Grid_3，现在整个布局在 container_12 div 内移动了 10px。

为了实现你描述的布局。根据我的理解，应该是这样的：

您需要创建一个新类以将float:right 应用于 Grid_9 或增加 Grid_9 的宽度。

要做到这一点，内联看起来像这样：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>960 Grid System &mdash; Demo</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
</head>
<body>

<div class="container_12" style="background:blue;">
   <div class="grid_3 alpha" style="background:yellow;">Grid_3 Alpha</div>
   <div class="grid_9 omega" style="float:right; background:green;">Grid_9 Omega</div>
</div>

</body>
</html>

【讨论】：

感谢您抽出宝贵时间撰写详细说明。我希望他们是 960 网格系统中的本地类，可以在不添加我自己的 CSS 的情况下按照我的要求做。即使我没有得到我正在寻找的确切答案，我确实从你的帖子中学到了一些东西..

【解决方案2】：

您没有按照设计使用 960 系统。使用 alpha 和 omega 类删除的边距使其加起来为 960 像素。

Alpha 和 omega 只分别去除左右边距，不改变宽度。如果你想让它工作，你需要向grid_9 omega div 添加一个类，给它一个比标准宽度更宽的宽度。 720px，也许吧？

<style>
.wide_9{width:720px;}
</style>

<div class="container_12">
   <div class="grid_3 alpha"></div>
   <div class="grid_9 wide_9 omega"></div>
</div>

【讨论】：

等等，您是在说“您没有按照设计使用 960 系统”，然后使用 hack 来让事情正常工作？我不使用 960gs 但这似乎不对，而且 OP 说他想“使用 960 方法纠正这种行为”。所以没有办法用网格框架“原生”地做到这一点？
我不会调用定义类并将其宽度设置为 hack。假设 OP 知道不将样式标签放在正文中是合理的。如果他想要非标准的行为，他需要添加自己的 css。我还没有看到任何关于他想在网格 css 中做什么的规定。像这样的框架给你一个很好的基础，但是如果你想做一些特别的事情，你需要添加你自己的 css。这是给定的。
是的，“hack”这个词太强了，我很惊讶没有内置的解决方案，特别是如果 alpha 类第一次工作分区。然后 +1，但也许像 full-width 这样向容器添加一个类是一个很好的解决方案。

【解决方案3】：

您需要对子元素使用 alpha 和 omega 类。如果您的布局需要触及边距（您使用背景），那么正确使用 alpha 和 omega 类将类似于将背景附加到grid_12 div。

<div class="container_12">
  <div class="grid_12">
    <div class="grid_3 alpha"></div>
    <div class="grid_9 omega"></div>
  </div>
</div>

或者如果您不需要背景对齐，您可以简单地省略 alpha 和 omega 类

<div class="container_12">
  <div class="grid_3"></div>
  <div class="grid_9"></div>
</div>

这两个 sn-ps 在浏览器中应该看起来相同。

【讨论】：