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

我目前正面临一个有趣的CSS问题，我无法在网上找到任何相关的问题。（？）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元素的宽度，然后继续向下移动下一行。

任何想法如何解决这个问题？任何帮助非常感谢！

来源

2010-08-27 squarehouse

非常有趣的问题。我绝对正在寻找一个优雅的解决方案。 – 2010-08-28 12:26:50

恐怕没有纯CSS的方式来实现这一点。原则上，浮动总是从上到下与文档布局一样。

你可以写一些帮助方法来为你生成这段标记。按照块反向顺序填充列表项并插入一些空的项目。或者，将几个列表渲染到另一个下面。

来源

2010-08-27 15:46:29

你不能仅仅因为CSS违反浮动规则而从CSS中获得这种效果。

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

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

来源

2010-08-27 15:46:43 rochal

嗯..这是一个可怜的 - 但感谢你的好的提示和你的想法。

我会去检查一下是否可以用空的项目处理它（这在我看来并不是最好的方式），或者我把它们放在一个接一个的顶部。但第二件事情会变得很难以及名单需要绝对定位！..

谢谢你们。

来源

2010-08-28 07:40:55 squarehouse

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

我认为这会有所帮助。

来源

2017-08-27 07:39:53 Ashraful

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

回答

相关问题