CSS - 元素的“反向”浮动 - 如何将它们保持在底部？答案

【问题标题】：CSS - "Reverse" Floating of Elements - how keep them at the bottom?CSS - 元素的“反向”浮动 - 如何将它们保持在底部？
【发布时间】：2017-08-27 15:39:53
【问题描述】：

我目前正面临一个有趣的 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; }

为了让您了解它的外观以及目标是什么，我已经为您绘制了它：看这里（我不允许上传图片..）：link text

如您所见，图标向左浮动，但显然是从顶部开始的。这不好，因为我想要从左下角开始的浮动反向，填充 ul 元素的宽度并在下一行继续浮动。

知道如何解决这个问题吗？任何帮助都非常感谢！

【问题讨论】：

非常有趣的问题。我肯定正在寻找一个优雅的解决方案。

标签： html css css-float

【解决方案1】：

你不能仅仅通过 CSS 来达到这个效果，因为它违反了浮动规则。

你可以做的是插入空的<li>，我们称之为'spacer'，它将填充第一行第三个图标的空间并将剩余的内容向下推。

否则 - 您必须将您的 <ul> 拆分为 2 个列表，然后再次对齐所有内容。

【讨论】：

【解决方案2】：

恐怕没有纯 CSS 方法可以实现这一点。原则上，浮动总是像文档布局一样从上到下。

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

【讨论】：

【解决方案3】：

嗯.. 有点遗憾 - 但感谢您的良好提示和您对此的想法。

我会去检查是否可以处理空项目（在我看来这不是最好的方式），或者我一个一个地放置在彼此顶部的其他列表。但是第二件事会很困难，而且列表需要绝对定位！..

谢谢你们。

【讨论】：

【解决方案4】：

display: flex;
flex-direction: row-reverse;

我认为这会有所帮助。

【讨论】：