Ayuda: para alinear 8 imágenes en 2 columnas con CSS

Jxit3 · 26 Mar 2013

Quisiera poder alinear 8 imágenes en 2 columnas, he usado listas, y le he puesto estilo pero no me sale bien, siempre una me queda mas abajo que la otra.

lo que quiero lograr es algo así:

1 5
2 6
3 7
4 8

se que se puede hacer con CSS pero no lo logro, y creo que estoy cometiendo algún error 😕, seguro alguien me puede dar una mano , agradecería mucho una ayudadita 🙂

aquiii · 26 Mar 2013

Cuanto miden las imagenes? de ancho..
pruebaa esto:

Insertar CODE, HTML o PHP:

<style>
.contenedorimgs{
width:620px;
}
.imgcont{
max-width:300px;
height:auto;
}
</style>
<div class="contenedorimgs">
<img src="img1.jpg" alt="ALT" class="imgcont">
<img src="img2.jpg" alt="ALT" class="imgcont">
<img src="img3.jpg" alt="ALT" class="imgcont">
<img src="img4.jpg" alt="ALT" class="imgcont">
<img src="img5.jpg" alt="ALT" class="imgcont">
<img src="img6.jpg" alt="ALT" class="imgcont">
<img src="img7.jpg" alt="ALT" class="imgcont">
<img src="img8.jpg" alt="ALT" class="imgcont">
</div>

Este seria el resultado:

Jxit3 · 26 Mar 2013

aquiii dijo:

Cuanto miden las imagenes? de ancho..
pruebaa esto:

Insertar CODE, HTML o PHP:

<style>
.contenedorimgs{
width:620px;
}
.imgcont{
max-width:300px;
height:auto;
}
</style>
<div class="contenedorimgs">
<img src="img1.jpg" alt="ALT" class="imgcont">
<img src="img2.jpg" alt="ALT" class="imgcont">
<img src="img3.jpg" alt="ALT" class="imgcont">
<img src="img4.jpg" alt="ALT" class="imgcont">
<img src="img5.jpg" alt="ALT" class="imgcont">
<img src="img6.jpg" alt="ALT" class="imgcont">
<img src="img7.jpg" alt="ALT" class="imgcont">
<img src="img8.jpg" alt="ALT" class="imgcont">
</div>

Este seria el resultado:

Gracias compañero 😛8:, me estaba rompiendo la cabeza con float cuando de esta forma es mas fácil :encouragement:.

Muchas Gracias.

aquiii · 26 Mar 2013

por nada compañero para eso estamos!
exito!

Jxit3 dijo:
Gracias compañero 😛8:, me estaba rompiendo la cabeza con float cuando de esta forma es mas fácil :encouragement:.

Muchas Gracias.