html - 在使用 float :left? 之后，如何换行

Question

我想要做的是有几行图像，每行 6 张图像。其中一些图像需要有另一个图像 float 在它们之上(与右下角齐平)。我能够通过这个线程让它工作:

How do I position one image on top of another in HTML?

但是，现在我无法在第 6 个图像之后获取新行。都不是 <BR>或 <P>创建一个新行。他们只是将下一张图像向下推几个像素，但图像仍然在同一行中。 float 样式似乎干扰了 <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”。

Answer 1

您需要在每 6 张图像后“清除” float 。因此，使用您当前的代码，将 containerdivNewLine 的样式更改为:

.containerdivNewLine { clear: both; float: left; display: block; position: relative; }