Problema con elementos de listas flotantes

[pinchu]

Hola:

Tengo una lista con fotos dentro.Los "li" de la lista los tengo a float: left; de modo que cuando no caben más fotos a lo ancho se pasa a la siguiente fila.

El problema es que cuando las fotos tienen distinta altura(unas llegan más abajo que otras) al saltar de linea las siguientes fotos no se colocan como deberían, tienden a colocarse debajo de las fotos más cortas de la fila superior dejando huecos sin rellenar.

¿Cómo soluciono esto de modo que en cada fila haya la misma cantidad de elementos?

Gracias

[jomaruro]

Hola:

No sé si te valdrá la solución que te doy, dale a todas las imágenes el heigth de la más alta, automáticamente el width se adaptará de manera que la imagen no se deformará y al saltar de línea no se colocarán debajo de las más cortas.

Saludos.

[pinchu]

La verdad que lo quería hacer sin tener que recurrir a eso porque teniendo un width fijo puedo controlar mejor cómo se muestran las imágenes.

Una cosa que se me ocurrió es :

-Como se el width de las imagenes puedo saber cuantas me caben por fila.
-Meter cada fila dentro de un div que tomara la altura del más alto

Lo que pasa es que no sé si es una buena idea o si se puede hacer con css sin falta de recurrir a esto

[jomaruro]

Hola:

Estoy pensando otra cosa, ¿y si en lugar de meter cada fila en un <div> le das una altura al <li>.?

Saludos.

[kseso?]

Hola Jomaruro:
creo que has olvidado mencionar el error del viernes

Pinchu, pon un enlace a esa página (pues al usar imágenes es difícil ajustarse a tus necesidades sin contar con ellas).

[pinchu]

Sería una forma pero claro entonces tendría que saber la altura máxima que va a tener una imagen.

Yo las imágenes las redimensionaba a 90px de width y height proporcional pero me imagino que de todas maneras debería de establecer un height máximo tb...



Gracias por las respuestas,¿alguna otra manera?

[pinchu]

El codigo que saca las imagenes es este:

$path = "img/usuarios/usuario-".$idUsuario."/thumbs/";
$dir = opendir($path);


echo '<p class = "titulo-tablon">Mis fotos</p><div id = "fotos">';
echo '<ul>';
while ($foto = readdir($dir)) {

if (($foto != '.') && ($foto != '..')) {

echo '<li class = "foto"><img src = "'.$path.$foto.'" alt = "'.$foto.'"/></li>';
}
}
echo '</ul></div>';

y el css este:

div#contenedorFotos div#fotos
{
padding: 15px 10px 0 10px;
}

div#contenedorFotos div#fotos ul li
{
float: left;
margin: 5px;
padding: 3px;
border: 1px solid #C2E600;
}

[jomaruro]

Hola:

Iniciado por kseso?

Hola Jomaruro:
creo que has olvidado mencionar el error del viernes

Creo que tienes razón, a cada paso que se da aparece información nueva.

Saludos.

[pinchu]

jomauro estaba pensando que lo que propones no lo puedo hacer, porque según entiendo tendría que darle a cada li el máximo alto que puede tener una foto, pero si resulta que en esa linea no hay una foto de tamaño máximo quedaría muy feo.

¿Alguna solución más o haré lo de meter la fila de <li> dentro de un <div>?