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.