1

このレイアウトが必要です：

+-----------+------------------------+--------------+
|                                                   |
|                     TOP                           |
|                                                   |
|                                                   |
+-----------+------------------------+--------------+
|           |                        |              |
|           |                        |              |
|           |                        |              |
|     B     |       CONTENT          |       B      |
|           |                        |              |
|           |                        |              |
+-----------+                        |--------------+
|           |                        |              |
|           |                        |              |
|           |                        |              |
|     C     |                        |       D      |
|           |                        |              |
|           |                        |              |
|           |                        |              |
+-----------+------------------------+--------------+

「TOP」と「B」の背景は1つです。画像（上から白への色のグラデーション-たとえば、下）、「CONTENT」はメインページ（メニュー、エントリなど）、「C」は白です。色。

「D」も白色であれば問題ありません。ただし、「D」は他の色、たとえば赤です。

これを設定する必要があり、「CONTENT」が900pxと中央に固定されている場合（マージン：自動）、異なるモニター幅を考慮する必要があります。「C」の色はコンテンツの左側に、「D」の色は右側にある必要があります。ページはIE7、8、9およびその他のブラウザと互換性がある必要があります。

どうやってするの？

アップデート：

さて、いくつかのサンプルコードをしましょう：

<body>
    <div id="content">
        I don't know, maybe height is less maybe not...
        <div class="clear"></div>
    </div>
</body>

また：

<body>
    <div class="wrapper">
        <div id="content">
            I don't know, maybe height is less maybe not...
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</body>

body {
    /* background image - height: 400px */
    backgroud: url('images/bg.jpg') repeat-x;
}

#content {
    backgorund: #0f0;
    margin: auto;
    width: 900px;
    margin-top: 150px;
}

.clear {
    clear: both;
}

.wrapper {
    width: 100%;
}

コンテンツの左下に白（たとえば）、右下に赤（たとえば）を色付けしたいと思います。下とは、背景の本文が終了しているときに、ページの最後までを意味します。コンテンツの高さがわかっている場合は、絶対値（右：0px、幅50％）のdivを挿入できます。

4

1 に答える 1

3

「コードを追加するだけ」の形式で必要な構造は次のとおりです。

上：全幅シングルディビジョン。

divに含まれるBleftとC（今のところこれに「コンテナ」のクラスを与えましょう）。

900px幅の単一のdivをコンテンツします。

BrightとDは、BleftとCと同じ構造になります。

次に、BleftからDまでの新しいラッパーdivを作成し、それを「main-container」として識別します。

次に、CSSの場合は＃main-containerをdisplay:table、に設定し、.containerの場合は#contentsetを設定しdisplay:table-cellます。

これで始められるはずです。レイアウトのワークアウト方法と、この構造を設定した後で何か必要な場合はお知らせください。

于 2012-11-28T23:49:45.167 に答える