Question

我正在使用带有container_12的960网格系统。问题是我使用2 grid_6 col并且文本重叠。当我尝试将overflow属性设置为auto时，我得到一个滚动面板，但文本不会在宽度之后的下一行上移动。

       <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/960.css" rel="stylesheet" type="text/css" />

    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/text.css" rel="stylesheet" type="text/css" />
    <link href="css/Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="body" class="container_12">

    <div id="header" class ="grid_12">This is header</div>
    <div id="nav" class="grid_3">
    Navigation
    <ul>
    <li><a href ="google.com">Google</a></li>
     <li><a href ="yahoo.com">yahoo</a></li>
      <li><a href ="bing.com">bing</a></li>
    </ul>
    <p>dcjkldsjfkdjkljdsklvjkjvkdjkfljdskfjkdsjfkldjsfkjdksjkfjkd</p>
    </div>
    <div class="grid_9" >
    <div id="content">
    <h1>Content</h1>
    <p>The premise of the system is ideally suited to rapid prototyping, 
    but it would work equally well when integrated into a production environment. 
    There are printable sketch sheets, design layouts, and a CSS file that have identical  measurements.</p></div></div>
                   </div>
                  </form>
                  </body>
                  </html>
Problem here-:
<p>dcjkldsjfkdjkljdsklvjkjvkdjkfljdskfjkdsjfkldjsfkjdksjkfjkd</p>

Answer 1

确保容器内只有一级网格，例如：

<div class="container_12">
  <div class="grid_6"></div>
  <div class="grid_6"></div>
</div>

如果要在内容区域添加填充，请在网格中添加额外的div，不要在网格中添加填充，即。

<div class="container_12">
  <div class="grid_6"><div class="space"></div></div>
  <div class="grid_6"><div class="space"></div></div>
</div>

Answer 2

我遇到了同样的问题。我有一个“grid_3”，我把虚拟内容放在那里，但它一直溢出div。我也只是复制并粘贴了一个端到端的单词以查看它的样子。我回去并在单词之间添加了空格，它完美无缺。不扩展到div之外，它会停止并垂直扩展。 960中出现了什么样的错误或故障？

css 960网格系统问题

2 个答案: