Question

这看起来像是：

#div1 #div2
  #div3

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

Answer 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>

Answer 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推到底部，导致另外两个div。

Answer 3

#div3应该有clear:both。

Answer 4

请参阅此解决方案：http://jsfiddle.net/ZnZRs/1/

祝你好运：）

Answer 5

为div1和div2设width:100%;，我理解了这个问题。此外，如果是这种情况。

顶部有两个div，底部有一个div

5 个答案: