Question

我有3个<div>，我需要将第二个放在右边，所以我使用了#two {float:right;}。

左边是current result：#one，右边是#two;两者都是预期的。问题是#three浮出水面。

我尝试将#one和#two置于与#three不同的div中，但问题仍然存在。

这是我的expected result：#three的顶部应与#two底部的垂直位置相同。

Answer 1

您可以在div3上添加clear:both。

请参阅 DEMO

Answer 2

您需要清除浮动（#three { float:left; clear:both; }），并且在div 1之后不需要<br>。

Here是一个工作小提琴。

或者，您可以完全跳过将CSS添加到div 3，并使用：

<div id='one'>1</div>
<div id='two'>2</div>
<br clear="all">
<div id='three'>3</div>

Here就是这样。

Answer 3

我认为这就是你要做的事情

http://jsfiddle.net/DrYgu/

<div id="container">
    <div id='one'>1</div>
    <div id='three'>3</div>
</div>
<div id='two'>2</div>
<div class="clear"></div>

#container {
    width:60px;
    float:left;
}
#one, #two, #three {
    border:1px solid black;
    width:60px;
    height:100px;
    margin:2px;
    display:inline-block;
}
#two {
    height:185px;
    float:right;
}
.clear {
    clear:both;
}

Answer 4

您可以在div 1和3周围添加一个容器，然后向左浮动，而div 2可以向右浮动。

<div id="container">
    <div id="one">
    </div>
    <div id="three">
    </div>
</div>
<div id="two">
</div>  
 #two{
    float:right;
    height:180px;
    width:100px;
    border:1px solid blue;
}

#container{
    float:left;
    height:180px;
    border:1px solid green;
    width:100px;
}

浮动div没有重叠

4 个答案: