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部门是向左浮动的，所以它的位置是正确的。但是，因为它是浮动的，所以它从文档流中移除，所以它不包含在 wrapper 分区的高度中，而 footer 分区填充在它后面，然后文本向下移动，使其不在其他内容的后面。

于 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 回答