Problema alineando una lista de imágenes de diferente tamaño

[sir_alvarix]

Hola!

Necesito un poco de ayuda porque llevo toda la tarde pegándome cabezazos con esto.

Quiero hacer lo siguiente: Tengo imágenes de distinto tamaño, tanto en horizontal como en vertical y necesitaría que las horizontales, se me alinearan en el centro de la vertical. Para mostrarlas, quiero que se vayan mostrando en filas de 3 en 3, donde ni ancho ni alto de las filas sean fijos, ya que es para dispositivos móviles y pueden cambiar.

Tengo estos códigos:

HTML (impreso por php):

Código:

...

echo "<ul class='gallery'>";
			  
foreach ($fotos as $key => $row) {
						
  echo"<li><a href='".$row['url']."' rel='external'><img src='".$row['url']."' alt='Subida por ".$row['autor'].".' /></a></li>";		  
				  
}
				  
echo "</ul>";

...

y el CSS correspondiente:

Código:

.gallery { list-style: none; padding: 0; margin: 0; }
.gallery:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.gallery li { float: left; width: 33.33333333%; }
.gallery li a { display: block; margin: 5px; border: 1px solid #3c3c3c; vertical-align:middle; }
.gallery li img { display: block; width: 100%; height: auto; vertical-align:middle; }

Alguien me echa una mano?? Gracias!!!

[wlinker]

deberías publicar el sitio del que hablas, es dificil apoyar cuando lo que necesitas es para algo demasiado gráfico, las palabras suelen quedar cortas, yo por el momento no tengo tanto tiempo para ponerme a analizar y replicar lo que deseas y poder así ayudarte, desde mi trabajo me doy el tiempo de entrar aquí y apoyar por ratos, pero por ahora no pude.

como comentario aveces incluso una captura de pantalla es suficiente, saludos y suerte.

[flashmax]

El codigo html que veo no esta impreso por php ,digamos que es el php, pon el codigo fuente que te entrega el navegador mas una carptura de la pagina como te indico Wlinker

[sir_alvarix]

Hola de nuevo!

Gracias por leer el mensaje y siento haberme explicado regular. Espero poder explicar un poco mejor mi problema.

El resultado que tengo es el siguiente, donde he marcado con recuadros rojos donde deberían quedar las fotos. Aunque me gustaría tal y como lo pongo, centradas en la vertical, no me importaría que se alineara a la línea inferior, siempre que se solucione el problema que vemos en la 3ª fila en la que se solapa la primera imagen de la siguiente fila y el resto se queda en blanco.



Y el código en html que me da como resultado lo de arriba, aplicando el CSS del primer post, es una simple lista:

Código:

<div data-role="content"> //Esto es el contenedor de jquery mobile, pero creo que no influye en el interior que es mi problema,
              
      <ul class='gallery'>
             <li><a href='http://.....png' rel='external'><img src='http://.png' alt='Subida por Maria La Portuguesa.' /></a></li>
             <li><a href='http://....jpg' rel='external'><img src='http://....jpg' alt='Subida por Alvaro.' /></a></li>
             <li><a href='http://.....png' rel='external'><img src='http://.png' alt='Subida por Maria La Portuguesa.' /></a></li>
             <li><a href='http://....jpg' rel='external'><img src='http://....jpg' alt='Subida por Alvaro.' /></a></li>
             <li><a href='http://.....png' rel='external'><img src='http://.png' alt='Subida por Maria La Portuguesa.' /></a></li>
             <li><a href='http://....jpg' rel='external'><img src='http://....jpg' alt='Subida por Alvaro.' /></a></li>
             <li><a href='http://.....png' rel='external'><img src='http://.png' alt='Subida por Maria La Portuguesa.' /></a></li>
             <li><a href='http://....jpg' rel='external'><img src='http://....jpg' alt='Subida por Alvaro.' /></a></li>  
          </div>

A ver si me podeis ayudar, GRACIAS!!

[sir_alvarix]

Otra opción que he pensado que me valdría, incluso sería la más aconsejable, sería sacar de las imagenes una vista previa que fuese un trozo, todos del mismo tamaño, por ejemplo, empezando desde arriba a la izquierda, 200px hacia abajo y hacia la derecha... pero no sé como podría hacerlo ya que lo que visto es para sacarlo fuera de la página y eso no me vale...

Gracias de nuevo!!

[sir_alvarix]

Hola!

Ya lo solucioné haciendo estos cambios en el css:

Código:

.gallery { list-style: none; padding: 0; margin: 0; }
.gallery li {	
	display: inline-block;
	width: 33.333%;
	text-align: center;
	vertical-align: middle
}
.gallery li a { display: block; margin: 5px; border: 1px solid #3c3c3c;}
.gallery li img { display: block; width: 100%; height: auto;}
#Gallery .ui-content { overflow: hidden; }

Saludos!