如何让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>

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- DIV。我如何将它们分开？

9 个解决方案

#1

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/

#2

Use clear:both; on your content#2

使用清楚：两者;关于你的内容＃2

#3

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>

#4

You forgot to close your <div id="images1"> :)

你忘了关闭你的

#5

use 'clear:both' on content2 div

在content2 div上使用'clear：both'

#6

I hope you need to add another div before <div id="content2">Text 2</div> which will be <div style="clear:both;"></div>

我希望你需要在

Text 2 之前添加另一个div，它将是

#7

clear your floats. Here is an article describing whats going on: Clearing A Float Element

清理你的花车。这篇文章描述了最新进展：清除Float元素

#8

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被关闭并且Content divs没有浮动，那么它应该工作。

#9

overflow:hidden on your content1 div will make it expand to include all floated children. (Of course, this will hide non-floated overflowing content.)

溢出：隐藏在你的content1 div上会使它扩展到包括所有浮动的孩子。（当然，这将隐藏非浮动的溢出内容。）

#1