顶部两个div，底部一个div答案

【问题标题】：Two div on the top, one div on the bottom顶部两个div，底部一个div
【发布时间】：2011-08-02 18:36:00
【问题描述】：

看起来像：

#div1 #div2
  #div3

我尝试将#div1 和#div2 设置为float left，但#div3 的某些部分出现在顶部。这里有什么问题？

【问题讨论】：

你的问题到底是什么？

标签： html css

【解决方案1】：

<div id="one"></div><div id="two"></div>
<div class="clear"></div>
<div id="three"></div>


<style>
#one {
float:left
}

#two {
float:left
}

.clear {
clear:both;

}


</style>

【讨论】：

div.clear 不是必需的（在这种情况下），您可以将 clear:both 设置为 div#three

【解决方案2】：

这应该适合你：

<!DOCTYPE HTML>
<html>
<head>
  <title>aaa</title>
<style>
div {
    border: 1px solid red;
}
#container {
    width: 211px;
}
.fl {
    float: left;
}

#bottom {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
}
</style>
</head>

<body>
    <div id="container">
        <div class="fl">FLOAT LEFT 1</div>
        <div class="fl">FLOAT LEFT 2</div>
        <div style="clear:both;"></div>
        <div id="bottom">Bottom Div</div>
    </div>
</body>

</html>

顺便说一句，你不能让你的浮动 div 100%；在宽度上。在这种情况下，第一个 DIV 会将第二个浮动 div 推到底部，从而使 3 个 div 彼此重叠。

【讨论】：

【解决方案3】：

#div3 应该有clear:both。

【讨论】：

【解决方案4】：

查看此解决方案：http://jsfiddle.net/ZnZRs/1/

祝你好运:)

【讨论】：

【解决方案5】：

为 div1 和 div2 制作width:100%;，我是否理解这个问题。另外，如果是这样的话。

【讨论】：