960.gs 布局问题答案

【问题标题】：960.gs layout issue960.gs 布局问题
【发布时间】：2011-04-14 21:13:49
【问题描述】：

我正在尝试学习 960 网格系统。我的左侧正文出现在右侧，反之亦然。我的意图是将这两个盒子放在同一行。左侧正文在页面上的显示也高于右侧正文。

有什么想法吗？使困惑！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Site name</title>
        <link rel="stylesheet" type="text/css" href="./960.css" />
        <link rel="stylesheet" type="text/css" href="./styles/main.css" />
    </head>

    <body>
        <div id="skip">
            <a href="#content">Skip navigation</a>
        </div>

        <div id="header" class="container_12">
            <div id="mainLogo" class="grid_4">
                <h1>Page name</h1>
            </div>

            <div id="testContainer" class="grid_8">
                <div id="mainNavigation">
                    <ul>
                        <li><a href="#">nav1</a></li>

                        <li><a href="#">nav2</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="content" class="container_12">
            <div id="contentleft" class="grid_8">
                <p>Left body text</p>
            </div>

            <div id="contentright" class="grid_4">
                <p>Right body text</p>
            </div>
        </div>

        <div id="footer" class="container_12">
        </div>
    </body>
</html>

【问题讨论】：

这对我来说在 Opera、IE8、Chrome 和 FF 中的 jsfiddle 上看起来不错。可以发一个网址示例吗？
多么奇怪。那里对我来说也很合适。见这里：jentestsite01.cjb.net
以上是我的意思。在 jsfiddle 上看起来正确，但在我提供的 URL 上不正确。很高兴这似乎不是一个简单的问题！我也检查了 IE 和 Firefox，但仍然存在同样的问题。

标签： css 960.gs grid-layout

【解决方案1】：

对我来说（在 Chrome 8 中），问题是由 H1 上的边距引起的。具体来说，Chrome 的用户代理样式表正在插入：

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: 0.67em 0px;
}

这个 h1 的额外高度导致 contentleft div 直接在 testContainer div 下方开始。

将边距设置为 0 可以解决我在 Chrome 8 中遇到的问题。

注意instructions for setting up 960.gs 提到使用reset.css 样式表：

<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
</head>

这也应该消除这个问题。无论如何，包含一个重置样式表通常是一种很好的做法，所以如果您正在学习 960 网格系统，您应该包含这个样式表。

【讨论】：

【解决方案2】：

在每一行之后，请添加带有 clear 类的 div。

首先是在您关闭 id=mainLogo 的 div 标记之后。第二个是在你用 id = testcontainer 关闭 div 标签之后。

【讨论】：

clear_fix 类被构建为框架的一部分

【解决方案3】：

我也遇到过同样的问题。如果您在同一页面上使用多个容器，您还需要将 clear_fix css 类应用于除第一个之外的所有容器类，并尝试将其自身定位在页面顶部。

 <div id="content" class="container_12 clear_fix">
 </div>

如果您查看 960.gs 上任何示例网站的来源，他们会在使用许多容器的情况下这样做。

【讨论】：