在使用float:left之后，我如何获得一个新行？
在使用float:left之后，我如何获得一个新行？
提问于 2010-04-06 03:53:29
我正在尝试做的是有图像行，每行6个图像。其中一些图像需要在它们的顶部浮动另一个图像(与右下角齐平)。我能够从这个帖子中得到它的工作：
How do I position one image on top of another in HTML?
但是，现在我无法获得第6张图像之后的新行。<BR>和<P>都不会创建新行。它们只是将下一个图像下推几个像素，但图像仍然在同一行中。浮点样式似乎正在干扰<BR>和/或<P>。
我尝试对开始新行的图像使用不同的样式，如float:none和display:block，但都不起作用。奇怪的是，新行在第7个图像之后启动。
到目前为止，我使用的是：
<style type="text/css">
.containerdiv { float: left; position: relative; }
.containerdivNewLine { float: none; display: block; position: relative; }
.cornerimage { position: absolute; bottom: 0; right: 0; }
</style>
<div class="containerdiv">
<img border="0" height="188" src="myImg" width="133" />
<img class="cornerimage" height="140" src="imageOnTop" width="105" />
</div>对于第7张图片，当我试图开始一个新的行时，我只是简单地将'containerdiv‘类替换为'containerdivNewLine’。
回答 5
Stack Overflow用户
回答已采纳
发布于 2010-04-06 03:57:15
你需要在每6张图片后“清除”浮动。因此，在当前代码中，将containerdivNewLine的样式更改为：
.containerdivNewLine { clear: both; float: left; display: block; position: relative; } Stack Overflow用户
发布于 2012-08-23 20:05:39
您还可以使用
<br style="clear:both" />Stack Overflow用户
发布于 2010-04-06 03:57:29
尝试clear属性。
请记住，float从文档布局中删除了一个元素-所以，在某种程度上，它是在“干扰”br和p标签，从某种意义上说，它基本上忽略了主流布局中的任何内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2580772
复制相关文章
相似问题
腾讯云开发者
