Alinear galería en html
Buenos días señor experto, quisiera quitarle un poco de su tiempo para que por favor me ayude con este pequeño problema que tengo con una pagina que estoy creando ....
http://funproades.com/galer%C3%ADa.html , la galería muestra una recopilación de imágenes que al dar click se abren con lightbox, el problema es que se ven desordenadas .... Obviamente se ve así porque las fotos tienen distintos tamaños de alto y ancho, pero quisiera que quedaran más ordenadas y no se vieran como ... Una escalera ... Gracias por su tiempo!
2 Respuestas
Estoy mirando tu pagina y viendo el código que tienes, y observo que lo estas cambiando y estas trabajando en ello.
Acabas de poner una linea en css así:
.wrapper img {
width:250px;
height:150px;
float:left;
margin:15px 20px 0 0;
}que es la mejor manera de trabajar. (antes no lo tenias así). Pero, esto deforma las imágenes que no tengan el ancho de 250px.
No veo mas solución que hacer las imágenes de igual ancho, o en todo caso de un ancho doble o mitad, y que tu puedas jugar con eso para hacer las lineas iguales.
Dime mas cosas
El enlace que proporcionas no funciona, no obstante por tu explicación deduzco lo que pasa.
La solución consistiría en dar una altura y anchura fijas al contenedor de cada imagen, de este modo aunque las imágenes sean de diferente tamaño, se mantendrá la estructura.
También puedes fijar la altura del contenedor simplemente, con eso se evitará el escalonado, pero puede que tengas también problemas de visualización de escalonado en horizontal.
Yo establecería una medida fija para los contenedores
/* CODIGO CSS */
.images .contenedor{
width: 200px;
height: 200px;
}<!-- CODIGO HTML -->
<div class="images">
<div class="contenedor">
<a href="miimagen1.jpg" rel="lightbox"><img src="miimagen1.jpg" /></a>
</div>
<div class="contenedor">
<a href="miimagen1.jpg" rel="lightbox"><img src="miimagen1.jpg" /></a>
</div>
<div class="contenedor">
<a href="miimagen1.jpg" rel="lightbox"><img src="miimagen1.jpg" /></a>
</div>
<div class="contenedor">
<a href="miimagen1.jpg" rel="lightbox"><img src="miimagen1.jpg" /></a>
</div>
</div>