960网格系统 - 12 col - 触摸容器边缘
我正在使用960网格系统来尝试创建布局...我有以下代码:
<div class="container_12">
<div class="grid_3 alpha"></div>
<div class="grid_9 omega"></div>
</div>
我使用alpha和omega分别删除左边距和右边距.这使得div可以触摸容器的左边缘.
然而问题是右手grid_9欧米茄不触及右手边.我理解为什么会发生这种情况,但我不知道如何使用960方法纠正这种行为.
谢谢,
它可能有助于理解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:rightGrid_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>