logo标签列表

如何使一个HTML div在另一个div下面显示？

csshtmlrows
20
<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中。如何保持它们分开？

9个回答
23
那是一篇非常有用的文章。我完全不想读它，但是之后发现它真的很直观，而且做起来也不难。不错的发现。 - Shmack
2
在你的内容#2上使用clear:both;。
2

应用：

#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>
0

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

0

在content2 div上使用'clear:both'

0

我希望你在<div id="content2">Text 2</div>之前添加另一个

，它将是<div style="clear:both;"></div>

0
0

您没有关闭<div id="images1">。如果此div已关闭且Content divs未向左浮动，则应该可以正常工作。

0
在你的content1 div上加上overflow:hidden将使它扩展以包含所有浮动的子元素。（当然，这会隐藏非浮动的溢出内容。）
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接