Question

我要做的是拥有多行图像，每行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'。

Answer 1

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

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

Answer 2

您也可以使用

<br style="clear:both" />

Answer 3

尝试clear属性。

请记住，float会从文档布局中删除一个元素 - 所以是的，它会“干扰”br和p标记，因为它基本上会忽略任何内容主流布局。

Answer 4

也是这样

<br clear="all" />

Answer 5

另一种更加语义的方法是将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>

使用float：left后如何获得新行？

5 个答案: