Question

我正在尝试学习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>

Answer 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网格系统，你应该包括这个样式表。

Answer 2

在每一行之后，请添加明确类别的div。

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

Answer 3

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

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

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

960.gs布局问题

3 个答案: