0

divの位置を調整する際にこの問題が発生しています。ヘッダー、メニューペイン、右ペイン、左ペイン、フッターを表すように、多くの div を分離しました。pls は jsfiddle のコードをチェックしてください: http://jsfiddle.net/Kj5pe/

コードは、html:

<div id="main">
        <div id="header">
        </div>
        <div id="menu">
            <a href="#" class="buttons">Aaaa</a>
            <a href="#" class="buttons">Eeee</a>
            <a href="#" class="buttons">Iiii</a>
            <a href="#" class="buttons">Oooo</a>
            <a href="#" class="buttons">Uuuu</a>
        </div>
        <div id="leftpane">
            <p>Hello</p>
        </div>
        <div id="rightpane">
            <p>Hello</p>
        </div>
        <div id="midpane">
            <p>Hello</p>
        </div>
        <div id="footer">
            <p>Copyright &copy;</p>
        </div>
</div>

そしてCSS：

#main
{
    width: 65em;
    height: 35em;
    margin: auto;
}

#header
{
    background-color: #ffb400;
    height: 5em;
}

#menu
{
    background-color: #ffe63e;
    height: 3em;
}

.buttons
{
    text-decoration: none;
    border: 1px #ffb400;
    color: #001e59;
    line-height: 3em;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    display: block;
    font-family: consolas ,Segoe UI, courier new;
}

.buttons:hover
{
    background-color: #ffb400;
}

#leftpane
{
    height:25em;
    width: 15em;
    float: left;
    background-color: #b8c3d9;
    text-align: center;
    color: white;
    text-shadow: -1px 1px #000000;
}

#rightpane
{
    height:25em;
    width: 15em;
    float: right;
    background-color: #b8c3d9;
    text-align: center;
    color: white;
    text-shadow: -1px 1px #000000;
}

#midpane
{
    background-color: #a1abbf;
    height: 25em;
    width: 35em;
    margin: auto;
    text-align: center;
    color: white;
    text-shadow: -1px 1px #000000;
}

#footer
{
    height: 1.8em;
    background-color: #ffb400;
    margin-top: -1em;
    text-align: center;
    line-height: 1.8em;
    color: #ffffff;
    text-shadow: -1px 1px #000000;
}

フッターに margin-top: -1em があることに注意してください...私はそれをしなければなりませんでした。そうしないと、フッターと残りの div の間にギャップが生じます。なぜこれが起こるのですか？他の div では発生しませんが、なぜフッターだけなのでしょうか?

また、ミッドペインにもヘッダーからのギャップがあることに注意してください。これは私が使ったからです

ミッドペイン div 内のタグ。それらを削除すると、すべてが正常に戻ります。しかし、なぜ私はそれに頼らなければならないのでしょうか? なぜこれが起こるのですか？左右のペインで同じことを行いますが、これは起こりません。中央のペインだけが異なる動作をしているのはなぜですか?

4

2 に答える 2

2

マージン/パディングがないように p タグをリセットする必要があります

p
{
    margin:0;padding:0;
}

フィドル

于 2013-06-30T11:58:21.370 に答える