0

私は独特の問題を抱えているようです。

次のコード スニペットがあります。ご覧のとおり、最後にフッター div を追加しました。

<body>
    <div id="conainer">
        <div id="wrapper">
            <p>this is the wrapper</p>
            <div id="centerDoc">
                <p>this is the centerDoc</p>
            </div>  <!--centerDoc !-->
        </div> <!-- wrapper !-->
    </div> <!--container !-->
    <div id="footer">
        <p>footer</p>
    </div>
</body>

次の出力が得られます [何が起こっているかを確認するために境界線を追加しました]:

出力：

centerDoc div がフッター div 内にあることがわかりますが、その理由がわかりません。

div の CSS:

#container {
   margin:auto;
   width: 100%;
}

#wrapper{
    width:80%;
    border:1px dashed black;
}

#centerDoc {
   margin-top:2.8%;
   margin-left:10px;

   float:left;
   width: 100%;
   border:1px dashed black;
}

#footer{
    text-align:center;
    color:#333333;
    border:1px dashed black;
}

これを整理するための指針をいただければ幸いです。

4

2 に答える 2

2

これは正常な動作です。あなたの#centerDoc師団は左に浮いているので、その位置は正しいです。ただし、フローティングであるため、ドキュメントのフローから削除されます。そのため、ラッパー分割の高さには含まれず、フッター分割がその背後に表示され、テキストが下に移動して他のコンテンツの背後に表示されなくなります。

于 2012-08-10T02:45:23.550 に答える
1

@animusonは正しいです。「clear: both;」を使用できます。それを修正します。下記参照

<pre>
#footer{
    text-align: center;
    color: #333333;
    border: 1px dashed black;
    clear: both;
}
</pre>
于 2012-08-10T03:07:22.830 に答える