1

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

3 回答 3

0

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

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

于 2011-05-06T20:23:51.217 回答
0

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

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

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

于 2011-05-07T08:52:54.703 回答
0

对我来说（在 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 中的问题。

请注意设置 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 网格系统，您应该包含这个样式表。

于 2011-04-15T03:47:36.490 回答