Question

页脚div不会在其他div下对齐，但看起来像内容div一样高。（在内容和侧边栏div之间可见）

这是什么解决方案？（问题是什么，我也想知道）

#container{
    width:1200px;
    margin:10px auto;
}

#content{
    width:65%;
    min-height:350px;
    margin:10px 10px 0 0;
    background-color:#f6904e;
    float:left;
}

#sidebar{
    width:410px;
    min-height:350px;
    margin:10px 0 0 0;
    background-color:#fddc68;
    float:right;
}


#footer{
    margin-top:10px;
    width:100%;
    height:20px;
    background-color:#de3643;
}

http://jsfiddle.net/HwM8M/

Answer 1

您需要清除浮动。

说明：http://css-tricks.com/the-how-and-why-of-clearing-floats/

另一个有用的链接：http://css-tricks.com/all-about-floats/

演示：http://jsfiddle.net/lotusgodkk/HwM8M/1/

HTML：

    <br class="clear" />

添加css：

.clear {
    clear:both;
}

Answer 2

在display:inline-block中添加#footer：

#footer{
    margin-top:10px;
    width:100%;
    height:20px;
    background-color:#de3643;
    display:inline-block;/*Add this*/
}

fiddle

Answer 3

将此添加到您的#footer css：

clear: both;

编辑js：

http://jsfiddle.net/HwM8M/

Answer 4

试试这个：

<div style="clear:both;">
<div id="footer">
     Wouter Schaeffer
</div>

Demo

div框不与其他div对齐

4 个答案: