CSS - “反向"元素浮动 - 如何将它们保持在底部? [英] CSS - "Reverse" Floating of Elements - how keep them at the bottom?

问题描述

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

I'm currently facing an interesting CSS issue for which I couldn't find anything related on the web. I know it must be solvable, perhaps you guys crack the nut.. (?)

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

Following problem: I need to display some icons in front of an image positioned at the bottom left. As the number of icons can vary, the icons are floated next to each other (max. three per row - defined by the width properties).

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

Here's my HTML code (the div containing the icons is positioned absolute over an image):

<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>

<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>

以及相关的 CSS:

To get you a picture what it looks like and what the goal is i've scratched it up for you:
see here (I'm not allowed to upload images..): link text

为了让您了解它的外观以及目标是什么，我已为您整理了一下:看这里(我不允许上传图片..):链接文本

As you can see the icons are floated left, but obviously starting at the top. That's not nice, because I want the floating kind of reverse starting from the bottom left, filling the width of the ul-element and continue the floating on the next row up.

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

Any idea how to solve this? Any help is highly appreciated!!

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

解决方案

推荐答案

你不能从 CSS 中实现这种效果，因为它违反了浮动规则.

What you could do is to insert empty <li>, let's call it 'spacer' that will fill the space of the 3rd icon in 1st row and push the remaining content down.

你可以做的是插入空的

，我们称之为'spacer'，它将填充第一行第三个图标的空间并将剩余的内容向下推.>

否则 - 您必须将

拆分为 2 个列表，然后再次对齐所有内容.

Otherwise - you'd have to split your <ul> into 2 lists, and again align everything.

这篇关于CSS - “反向"元素浮动 - 如何将它们保持在底部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！