Foros del Web » Creando para Internet » CSS »

Problema con lista flotante

Estas en el tema de Problema con lista flotante en el foro de CSS en Foros del Web. Hola hermanos programadores les vengo con un problema, tengo una lista con los li flotantes uno al lado del otro asi: Código: <ul class="imgList"> <li><img ...
  #1 (permalink)  
Antiguo 11/04/2015, 23:35
 
Fecha de Ingreso: noviembre-2012
Mensajes: 26
Antigüedad: 12 años, 1 mes
Puntos: 1
Problema con lista flotante

Hola hermanos programadores les vengo con un problema, tengo una lista con los li flotantes uno al lado del otro asi:

Código:
<ul class="imgList">
   <li><img src="img_1"></li>
   <li><img src="img_2"></li>
   <li><img src="img_3"></li>
   <li><img src="img_4"></li>
   <li><img src="img_5"></li>
   <li><img src="img_6"></li>
   <li><img src="img_7"></li>
   <li><img src="img_8"></li>
   <li><img src="img_9"></li>
</ul>
Con el siguiente css

Código:
.imgList li{ 
   float:left;
   margin: 10px 0 0 25px;
   list-style:none;
}
En el código como verán se muestran 9 imágenes un al lado de la otra con una separación de 25px a la izquierda y 10 en la parte superior, el problema que surge es que todas las imágenes vienen con el mismo ancho que son 300px y muestro 3 imágenes por linea el problema es que sus alturas son variantes y el problema que me surge es que al momento de mostrarse en el navegador debajo de una imagen que es mas alta que el resto deja un espacio vacío y la imagen que debería estar en esa posición se coloca abajo de la siguiente, se que es difícil de entender así que aquí les dejo un link de como se vería:

http://tu-banner.com/4325341739/pruebas/prueba_lista/lista.php

Quisiera saber si hay alguna forma de que la imagen se coloque abajo de la imagen mas alta sin ese espacio que empuja a las demás imágenes haciendo que en la segunda linea se vean nada mas 2 imágenes.

Gracias.
  #2 (permalink)  
Antiguo 12/04/2015, 01:04
Avatar de mbm150  
Fecha de Ingreso: enero-2013
Ubicación: Muskiz
Mensajes: 79
Antigüedad: 11 años, 11 meses
Puntos: 21
Respuesta: Problema con lista flotante

Código CSS:
Ver original
  1. li{
  2.       margin: 10px 0 0 25px;
  3.       vertical-align: middle;
  4.       display: inline-block;
  5. }

Saludos.
__________________
Juego del Ahorcado
  #3 (permalink)  
Antiguo 12/04/2015, 08:16
 
Fecha de Ingreso: septiembre-2013
Mensajes: 5
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: Problema con lista flotante

Man si te tuviera al lado te besaria no sabes todo lo que me ha costado esto y tu lo resuelves en un instante, muchas gracias

Etiquetas: float, flotante, lista
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 03:41.