Question

我左右两个div都浮了......但是这两个div之后的下一个div没有正确显示... 我的代码如下

#Div1{ position: relative; float: left; }
#Div2{ position: relative; float: right; }

显示如下

<div id="Div1">This is aligned to left on the same x axis</div>
<div id="Div2">This is aligned to right on the same x axis</div>
<div style="color: red;">After the alignment this div does not align</div>

输出如下

http://i.stack.imgur.com/8A6hz.png

但我期待这样的事情

http://i.stack.imgur.com/wVGN6.png

Answer 1

试试这段代码。在样式中插入两个清除。

 #Div1{ position: relative; float: left; }
 #Div2{ position: relative; float: right; }

<div id="Div1">This is aligned to left on the same x axis</div>
<div id="Div2">This is aligned to right on the same x axis</div>
<div style="color: red;clear:both;">After the alignment this div does not align</div>

Answer 2

首先，您需要了解每当您使用浮动时，您需要使用

clear:both

对于您不希望浮动的后续div。这样做可以清除任何前面的浮动。

因此，就您的代码而言，您需要添加：

clear: both

到最后一个div。也就是说，

<div style="color: red;">After the alignment this div does not align</div>

需要

    <div id="ClearedDiv">
       After the alignment this div does not align
    </div>

CSS：

#ClearedDiv{
    color:red;
    clear:both;
}

您可以在此处看到：http://jsfiddle.net/WCT3m/

希望这会有所帮助..

Answer 3

多个元素的每个浮点数在完成后需要清除，放

<br clear="all" />

或

<div style="clear:both;"></div>

如果为两个元素指定宽度，那将非常好。

这对你来说很不错

<style type="text/css">
   #Div1{ position: relative; float: left; width:49%; }
   #Div2{ position: relative; float: right; width:49%; }
</style>
<div id="Div1">This is aligned to left on the same x axis</div>
<div id="Div2">This is aligned to right on the same x axis</div>
<div style="clear:both;"></div>
<div style="color: red;">After the alignment this div does not align</div>

Answer 4

Try this:

#Div1{position: relative; float: left;
#Div2{  position: relative; float: right;}
#Div3 { clear: both;}

<div id="Div1">This is aligned to left on the same x axis</div>
<div id="Div2">This is aligned to right on the same x axis</div>
<div id="Div3" style="color: red;">After the alignment this div does not align</div>

下一个Div在向右和向左浮动两个div后无法正确显示

4 个答案: