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

问题描述

我目前面临一个有趣的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> 
  
 
 
 
 
 
 
 
 / p> 
 
 
  .labels {position：absolute; bottom：20px; left：5px; z指数：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元素的宽度并继续在下一行上浮动。
 
 
 
任何想法如何解决这个？任何帮助是非常感谢！
解决方案
你不能实现CSS的效果，因为它是违反浮动规则。 
 
 
 
你可以做的是插入空的< li> ，让我们称之为spacer 
 
 
 
否则，您必须拆分< ul> 分成2个列表，并再次对齐所有内容。
 
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).

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>


And the related 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; }
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.

Any idea how to solve this? Any help is highly appreciated!!
解决方案
You can't achieve this effect from CSS only because it is against the floating rules.

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.

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

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