如何让HTML div在另一个div下运行?

问题描述:

<html> 
<body> 
<div id="content1"> 
    <div id="text1">This text floats left</div> 
    <div id="images1"><img src="img.jpg" /></div> <!--Floats right--> 
</div> 
<div id="content2">Text 2</div> 
</body> 
</html> 

当我试图做到这一点,并尝试做一个像两个行的表格一样的文本左浮动和图像浮动在最上面的一排,所有出现的是content2-div是压入content1-div。我怎样才能让他们分开?如何让HTML div在另一个div下运行?

+1

随你挑,伙伴 – 2011-06-07 16:04:11

您需要在您的#内容2格

使用clear:both;如果你真的想了解彩车的一切,看看这个惊人的教程:http://css.maxdesign.com.au/floatutorial/

使用clear:both;您的内容#2

你忘了关闭<div id="images1"> :)

使用“明确:双方”在内容2格

我希望你需要在<div id="content2">Text 2</div>之前添加另一个div,这将是<div style="clear:both;"></div>

清除你的浮动。 这里是描述怎么回事的文章:Clearing A Float Element

应用:

#images1{ 
float:right; 
} 

#content2{ 
clear:both; 
} 

和修复你的HTML标记

<div id="images1"><img src="img.jpg" /> <!--Floats right--> 

关闭DIV:

<div id="images1"><img src="img.jpg" /> <!--Floats right--></div> 

你有没有关闭<div id="images1">。如果这个div被关闭,Content div不会浮动,那么它应该工作。

overflow:hidden你的content1 div会使它扩大到包含所有漂浮的孩子。 (当然,这会隐藏非浮动溢出内容。)