960.gs布局问题

我想学习960网格系统。我的左身正文显示在右侧，反之亦然。我的意图是将这两个框放在同一行上。左侧正文文本在页面上显示得比右侧正文文本更高。960.gs布局问题

任何想法？困惑！

<!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>

来源

2011-04-14 Jen

你使用什么浏览器？ – 2011-04-14 21:23:15

我使用的是Chrome v10 – Jen 2011-04-14 21:24:26

在Opera，IE8，Chrome和FF中，[jsfiddle]（http://jsfiddle.net/U9YeX/）对我来说很好。你能发布一个URL的例子吗？ – 2011-04-14 21:26:07

对于我（在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网格系统，你应该包含这个样式表。

来源

2011-04-15 03:47:36

每行后请添加与清除类的股利。

首先会在关闭id = mainLogo的div标记之后。第二个关闭div标签后，id = testcontainer。

来源

2011-05-06 20:23:51 saush11

clear_fix类是为构建框架的一部分而构建的 – John 2011-05-07 08:55:23

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

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

如果你看看任何关于960.gs的例子网站，他们已经做到了这一点，他们使用许多集装箱源。

来源

2011-05-07 08:52:54 John

960.gs布局问题

回答

相关问题