CSS - "反向"浮动元素 - 如何将它们保持在底部？

Question

我目前正面临一个有趣的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元素的宽度并继续浮动下一行.

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

Answer 1

恐怕没有纯粹的 CSS 方法来完成这个任务。浮动总是从上到下，就像原则上的文档布局一样。

您可以编写一些辅助方法来为您生成这段标记。以块相反的顺序填充列表项并插入一些空项。或者，将多个列表一个接一个地呈现。