CSS - Flotación de elementos "reversa": ¿cómo mantenerlos en la parte inferior?

Question

Actualmente estoy enfrentando un problema de CSS interesante para el que no pude encontrar nada relacionado en la web. Sé que debe ser solucionable, quizás ustedes quiebren la tuerca ... (?)

Problema siguiente: Necesito mostrar algunos iconos delante de una imagen situada en la parte inferior izquierda. Como la cantidad de iconos puede variar, los iconos flotan uno al lado del otro (máximo tres por fila, definida por las propiedades de ancho).

Aquí está mi código HTML (el div que contiene los iconos se coloca absoluto sobre una imagen):

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

Y el CSS relacionados:

.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; } 

para conseguir que una imagen cómo se ve y cuál es el objetivo. Lo he rayado: ver aquí (No tengo permitido subir imágenes ...): link text

Como puede ver, los iconos flotan a la izquierda, pero obviamente comienzan en la parte superior. Eso no es bueno, porque quiero que el tipo de inversión flotante empiece desde abajo a la izquierda, llenando el ancho del elemento ul y continúe flotando en la fila siguiente.

¿Alguna idea de cómo solucionar esto? ¡¡Cualquier ayuda es muy apreciada!!

Answer 1

Me temo que no hay una forma pura de CSS para lograr esto. La flotación siempre va de arriba abajo como la disposición del documento en principio.

Puede escribir algún método auxiliar para generar esta pieza de marcado para usted. Complete los elementos de la lista en orden inverso al bloque e inserte algunos elementos vacíos. Alternativamente, renderiza varias listas una debajo de la otra.

Answer 2

No puede lograr este efecto desde CSS solo porque va en contra de las reglas flotantes.

Lo que podrías hacer es insertar <li> vacío, llamémoslo 'espaciador' que llenará el espacio del tercer icono en la 1ra fila y empujará el contenido restante hacia abajo.

De lo contrario, tendrías que dividir tu <ul> en 2 listas y volver a alinear todo.

Answer 3

Hm ... eso es una lástima, pero gracias por los buenos consejos y tus pensamientos al respecto.

Iré y comprobaré si puedo manejarlo con elementos vacíos (que en mi opinión no es la manera más agradable), o listas adicionales que coloco uno por uno en la parte superior de la otra . ¡Pero la segunda cosa va a ser difícil, así como las listas deben posicionarse absolutamente! ...

Gracias chicos.

Answer 4

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

Creo que esto ayudará.