Question

我需要做些什么来设置并排显示的2个div之下的文本（由'float：left'设置）。现在，“underneath”div中的文本显示在第二个div标签的右侧。

CSS

#wrapper {
    width: 500px;   
}
#leftcolumn, #rightcolumn {
    float: left;
    height: 200px;
    width: 250px;
}
#leftcolumn {
    background-color: #111;
}
#rightcolumn {
    background-color: #777;
}

HTML

<div id="wrapper">
    <div id="leftcolumn"></div>
    <div id="rightcolumn"></div>  
</div>
<div id="underneath">
    This should be underneath
</div>

Answer 1

#underneath {
    clear: left;
}

这是一个JSFiddle： http://jsfiddle.net/WPNgL/

Answer 2

#underneath{

   clear:both;
}

此处由于您使用了float:left，#underneath div占据了左侧的空间，您可以使用clear:left或clear:both使其显示在其他容器下方，即使在使用clear:both时左/右有空格。

DEMO

FROM http://www.w3schools.com/cssref/pr_class_clear.asp

clear属性指定元素的哪一边在哪一边不允许使用浮动元素。

 left  -->  No floating elements allowed on the left side 
 right -->  No floating elements allowed on the right side
 both  -->  No floating elements allowed on either the left or the right side
 none  -->  Default. Allows floating elements on both sides 
 inherit --> Specifies that the value of the clear property should be inherited from the parent  element

Answer 3

<div id="wrapper">
   <div id="leftcolumn"></div>
   <div id="rightcolumn"></div>  
</div>
<div style="clear:both"></div>
   <div id="underneath">
     This should be underneath
</div>

你还没有清除浮动

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

Answer 4

你只需添加一个div来清除浮动值

     .clear{
        clear:both;
      }

Check on fiddle

将文本设置在2个并排的div下面

4 个答案: