css 如何在使用float：left后得到一个新行？

vhipe2zx 于 2023-08-09 发布在其他

关注(0)|答案(6)|浏览(69)

我尝试做的是有图像行，每行6个图像。其中一些图像需要有另一个图像浮在它们上面（与右下角齐平）。我可以从这个线程中得到它：
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'。

css

来源：https://stackoverflow.com/questions/2580772/how-do-i-get-a-new-line-after-using-floatleft

6条答案

按热度按时间

mbskvtky1#

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

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

字符串

赞(0）回复(0）举报 2023-08-09

pgvzfuti2#

你也可以使用

<br style="clear:both" />

字符串

赞(0）回复(0）举报 2023-08-09

f45qwnt83#

尝试clear属性。
记住float会从文档布局中删除一个元素--所以是的，在某种程度上它会“干扰”br和p标签，从某种意义上说，它基本上会忽略主流布局中的任何内容。

赞(0）回复(0）举报 2023-08-09

r1wp621o4#

也是这样

<br clear="all" />

字符串

赞(0）回复(0）举报 2023-08-09

bvjxkvbb5#

另一种稍微语义化一点的方法是将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>

字符串

赞(0）回复(0）举报 2023-08-09

db2dz4w86#

用table就行了。

table {
  border: none;
}

个字符
tr-表格行th-表格标题（基本上是一个网格）

赞(0）回复(0）举报 2023-08-09

我来回答

css 如何在使用float：left后得到一个新行？

6条答案

相关问题

热门标签

最新问答