1

私は960グリッドシステムを学ぼうとしています。私の左の本文のテキストは右に表示され、他のテキストはその逆になります。私の意図は、これら2つのボックスを同じ行に配置することです。左の本文のテキストは、右の本文のテキストよりもページの上位に表示されます。

何か案は？混乱している！ 

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

私の場合（Chrome 8の場合）、問題はH1のマージンが原因です。具体的には、Chromeのユーザーエージェントスタイルシートは以下を挿入しています。

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: 0.67em 0px;
}

このh1に余分な高さがあると、contentleftdivがtestContainerdivの真下から始まります。

マージンを0に設定すると、Chrome8での問題が解消されます。

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 に答える
0

すべての行の後に、明確なクラスで div を追加してください。

最初は、id= mainLogo の div タグを閉じた直後です。2 つ目は、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 に答える