小编squ*_*use的帖子

我目前正面临一个有趣的CSS问题,我在网上找不到任何相关内容.我知道它必须是可以解决的,也许你们破解坚果..(？)

以下问题:我需要在位于左下角的图像前面显示一些图标.由于图标的数量可以变化,因此图标彼此相邻(每行最多三个 - 由宽度属性定义).

这是我的HTML代码(包含图标的div位于图像的绝对位置):

<div class="labels">
<ul>
    <li><img src="image1.png" /></li>
    <li><img src="image1.png" /></li>
    <li><img src="image1.png" /></li>
    <li><img src="image1.png" /></li>
    <li><img src="image1.png" /></li>
</ul>

和相关的CSS:

.labels { position: absolute; bottom: 20px; left: 5px; z-index: 50; }
.labels ul { display: block; min-height: 20px; overflow: auto; width:210px; }
.labels ul li { float: left; list-style-type: none; margin: 0 5px 3px 0; }

为了让你了解它看起来像什么,目标是什么,我已经为你划了一条:看到这里(我不允许上传图片..):链接文字

正如您所看到的那样,图标向左浮动,但显然从顶部开始.这不好,因为我希望从左下角开始浮动反转,填充ul元素的宽度并继续浮动下一行.

不知道怎么解决这个问题？任何帮助都非常感谢!!