Problema con lista flotante

[Ali_Jose]

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.

[mbm150]

Código CSS:

li{
      margin: 10px 0 0 25px;
      vertical-align: middle;
      display: inline-block;
}
 

Saludos.

[krelan118]

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