0

で 960 グリッド システムを使用していcontainer_12ます。問題は、2grid_6列を使用していて、テキストが重なっているということです。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>
4

2 に答える 2

1

コンテナー内に 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>
于 2012-08-23T02:20:52.900 に答える