在使用 float: left 之后，如何得到一个新行？

我正在尝试做的是有一行的图像，每行6个图像。其中一些图像需要有另一个图像浮动在上面(与右下角齐平)。我通过这个帖子得到了这个结论:

如何在 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个图像，当我试图启动一个新行时，我只是将‘ conterdiv’类替换为‘ conterdivNewLine’。

126427 次浏览
小开
最佳答案

You need to "clear" the float after every 6 images. So with your current code, change the styles for containerdivNewLine to:

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

Try the clear property.

Remember that float removes an element from the document layout - so yes, in a way it is "interfering" with br and p tags, in the sense that it would basically be ignoring anything in the main flow layout.

小开

Another approach that's a little more semantic is to have a UL defined as your total 6 image width, each LI defined as float left and width defined - so that when LI #7 hits, it runs into the boundry of the UL, and is pushed down to the new row. You'll still have an open float that you'll want to clear after the /UL - but that can be done on the next element of the page, or as a clear div. Here's sort of the idea, you may have to mess with actual values, but this should give you the idea. The code is a little cleaner.

 <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>
小开

you can also use

<br style="clear:both" />
小开

Also such way

<br clear="all" />

提交答案