Question

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

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

我正在使用alpha和omega分别删除左右边距..这使得div可以触及容器的左边缘。

然而问题是右手grid_9欧米茄没有碰到右手边。我理解为什么会这样，但我不知道如何使用960方法纠正这种行为..

谢谢，

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

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

为了实现您描述的布局。根据我的理解，这应该是这样的： 960 layout with Float

您需要创建一个新类以将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>

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

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

这两个片段在浏览器中看起来应该相同。

960网格系统 - 12 col - 触摸容器边缘

3 个答案: