如何在使用float之后得到一个新行：left？
我想要做的是有行图像，每行6个图像。 其中一些图像需要另一个图像浮动（与右下angular齐平）。 我能够从这个线程得到这个工作：
如何在HTML中定位一个图像？
但是，现在我无法在第六张图像之后获得新的一排。 <BR>或<P>都不会创build新行。 他们只是把下一个图像下几个像素，但图像仍然在同一行。 浮动风格似乎是干扰<BR>和/或<P> 。
我尝试使用不同的样式来启动一个新行的图像，如float:none和display:block ，但都不起作用。 奇怪的是，新的行在第七张图像之后开始。
以下是我目前使用的：
<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>
对于第七张图片，当我试图开始一个新的行时，我只是用'containerdivNewLine'replace'containerdiv'类。
您需要在每6张图像后“清除”浮动。 因此，使用当前的代码，将containerdivNewLine的样式更改为：
.containerdivNewLine { clear: both; float: left; display: block; position: relative; }
你也可以使用
<br style="clear:both" />
尝试清除属性。
请记住，float从文档布局中删除了一个元素，所以是的，它以br和p标签“干涉”，就是说，它基本上忽略了主stream布局中的任何东西。
另一种更具语义的方法是将UL定义为总共6个图像宽度，每个LI定义为浮动左侧和宽度定义 – 以便当LI＃7命中时，它运行到UL的边界，并被推入下到新的一排。 你仍然会有一个打开的浮点数，你可以在/ UL之后清除 – 但是可以在页面的下一个元素上完成，或者作为一个清晰的div。 这是一个想法，你可能不得不歪曲实际的价值，但这应该给你的想法。 该代码是一个小清洁。
<style type="text/css"> ul#imageSet { width: 600px; margin: 0; padding:0; } ul#imageSet li { float: left; width: 100px; height: 188px; margin: 0; padding:0; position: relative; list-style-type: none; } .cornerimage { position: absolute; bottom: 0; right: 0; } h3.nextelement { clear: both; } </style> <ul id="imageSet"> <li> <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" /> <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" /> </li> <li> <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" /> <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" /> </li> <li> <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" /> <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" /> </li> <li> <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" /> <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" /> </li> <li> <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" /> <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" /> </li> <li> <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" /> <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" /> </li> <li> <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" /> <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" /> </li> <li> <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" /> <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" /> </li> </ul> <h3 class="nextelement">Next Element in Doc</h3>
