如何使 HTML div 位于另一个 div 下？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6268103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make a HTML div go under another div?
提问by DarkLightA
<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>
When I try to do this, and try to make a layout like a table with two rows with the text floating left and the image floating right in the top row, all that comes up is that the content2-div is squashed into the content1-div. How can I keep them separate?
当我尝试这样做时，并尝试将布局像两行的表格一样，文本向左浮动，图像向右浮动在顶行，结果就是 content2-div 被挤压到 content1-分区 我怎样才能让它们分开？
回答by Dave Kiss
You need to use clear:both;on your #content2 div
您需要clear:both;在 #content2 div 上使用
If you really wanna learn everything about floats, check out this amazing tutorial: http://css.maxdesign.com.au/floatutorial/
如果您真的想了解有关浮动的所有知识，请查看这个惊人的教程：http: //css.maxdesign.com.au/floatutorial/
回答by Niklas
Apply:
申请：
#images1{
float:right;
}
#content2{
clear:both;
}
and fix your html markup
并修复您的 html 标记
<div id="images1"><img src="img.jpg" /> <!--Floats right-->
close the div:
关闭div：
<div id="images1"><img src="img.jpg" /> <!--Floats right--></div>
回答by sgokhales
Use clear:both;on your content#2
clear:both;在您的内容上使用#2
回答by solendil
You forgot to close your <div id="images1">:)
你忘了关闭你的<div id="images1">:)
回答by Rizwan Sharif
use 'clear:both' on content2 div
在 content2 div 上使用“clear:both”
回答by sudipto
I hope you need to add another div before <div id="content2">Text 2</div>which will be <div style="clear:both;"></div>
我希望你需要在<div id="content2">Text 2</div>这 之前添加另一个 div<div style="clear:both;"></div>
回答by BentOnCoding
clear your floats. Here is an article describing whats going on: Clearing A Float Element
清除你的浮标。这是一篇描述正在发生的事情的文章：清除浮动元素
回答by Vinnyq12
You have not closed off <div id="images1">. If this div is closed and the Content divs arenot float left then it should work.
你还没有关闭<div id="images1">。如果此 div 已关闭并且内容 div 未向左浮动，则它应该可以工作。
回答by Tgr
overflow:hiddenon your content1 div will make it expand to include all floated children. (Of course, this will hide non-floated overflowing content.)
overflow:hidden在您的 content1 div 上将使其扩展以包含所有浮动的子项。（当然，这会隐藏非浮动的溢出内容。）
