960网格系统- 12色-接触容器边缘
我正在使用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方法来纠正这种行为。
谢谢,
回答 3
Stack Overflow用户
发布于 2011-11-02 02:48:33
这可能有助于理解960网格框架背后的基本原理。这个框架基于一个非常简单的原则，即结合固定的宽度和页边距来创建一个类似于网格的布局，以便快速开发网站。整个框架使用了float: left，它允许网格并排显示，并在每个网格之间创建20px的缓冲区。因此，我相信您误解了"alpha"和"omega"类的用法。这些类旨在删除作为其他网格的子级的网格上的页边距，以便将页边距相乘。
以下面的代码为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>960 Grid System — 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个像素的边距，这是因为Grid_3有一个margin-right:10px，而Grid_9有一个margin-left:10px。当两个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 — 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>Stack Overflow用户
发布于 2011-11-02 00:33:59
您使用的不是960系统的设计。使用alpha和omega类删除的边距将使其加起来达到960像素。
Alpha和omega只删除左边和右边的空白处，它们不会改变宽度。如果希望这样做，则需要向grid_9 omega目录添加一个类，使其宽度大于标准宽度。也许是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>Stack Overflow用户
发布于 2013-03-22 20:57:35
您需要对子元素使用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>这两个代码片段在浏览器中的外观应该相同。
https://stackoverflow.com/questions/7969498
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号