0

いくつかの部門があるページがあります。最初の 3 つは、ページの幅全体を上から下に 170px 占有します。これに改行が続き、次に 4 番目の区分が続きます。これは、前の区分の下に表示される必要があります。代わりに、ページの上部、3 つの区分の下に表示されています。仕切りがちゃんと閉まるか、何度も確認しましたが、問題ありません。別のスタイル シートを使用しているため、関連するコードを以下に投稿します。CSS を最初に、次に HTML を投稿します。

#banleft
{
    padding-top: 20px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    text-align: center;
    width: 200px;
    height: 170px;
}

#bancenter
{
    padding-top: 20px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    text-align: center;
    width: 600px;
    height: 170px;
}

#banright
{
    padding-top: 20px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    text-align: center;
    width: 400px;
    height: 170px;
}

#nav
{
    background-image: url(../media/purplemenubar.jpg);
    background-repeat: no-repeat;
    padding-top: 3px;
    padding-left: 30px;
    padding-right: 90px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    width: 1150px;
    height: 25px;
}

<div id="banleft">Content </div>
<div id="bancenter">Content </div>
<div id="banright">Content </div><br>
<div id="nav" class="cambria3black">Content </div>

注目に値する: 最終的な div からクラスを削除しようとしましたが、それは役に立ちません。また、「nav」div 内に実際のコンテンツを配置すると、ページの適切な場所に表示されます。上部に浮いて他の区画の背後にあるのは、区画の背景画像です。

4

1 に答える 1

1

のスタイルに追加clear:bothします。#nav

display:inline-blockまたは、代わりに を使用することを検討してfloat:leftください。

于 2013-03-09T01:52:06.200 に答える