Colocar un div abajo de otro div...
6 seguidores
Hola a todos, me surge un problema del que supongo que se ha hablado, pero no encuentro la solución...
Tengo varios div de diferentes tamaños y todos deben llevar unas imagenes pegadas en la parte baja y a la izquierda de cada uno de ellos, independientemente de lo que contengan e independientemente del tamaño que tengan.
He probado de todo:
Con position relative, he probado con bottom y vertical-align:bottom y no funciona...
Alguna idea?...
Muchas gracias de antemano...
Cloudstudio
Con css no lo puedes hacer, tienes que recurrir a jquery :
http://masonry.desandro.com/
Un saludo.
albatros
No entiendo mucho lo que quieres, pero has probado a poner esas imágenes como un background de los div correspondientes
Alo
Pongo un ejemplo gráfico....
[img][/IMG][/img]
Juanmanuelalcon.com
Hola!
Lo que pides se puede hacer con css perfectamente, la clave es combinar 'position:relative' para tu elemento contenedor y 'position:absolute' para las imágenes que deseas colocar debajo.
Te he montado una maquetilla rápida para que veas a lo que me refiero:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style>
.box {
position:relative;
display:block;
margin:10px;
float:left;
min-height:150px;
width:300px;
background:#ccc;
}
.box p {
padding:10px 10px 45px;
}
.down_images {
position:absolute;
display:block;
bottom:10px;
left:10px;
background:#0CF;
}
</style>
</head>
<body>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tincidunt diam. Donec consectetur, tortor ut ullamcorper dignissim, mi justo condimentum risus, quis dapibus est nulla quis purus. Suspendisse leo velit, feugiat quis laoreet ut, fringilla sed sapien. Nunc ornare elit id urna scelerisque sed pellentesque lorem sollicitudin. In hac habitasse platea dictumst. Proin vitae sapien mauris, in viverra nisl. Nam vehicula egestas justo, at rutrum quam gravida nec. Aenean sit amet velit enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ultricies ornare urna, vel accumsan tortor suscipit nec. Duis in risus lectus, sed tempor erat.</p>
<div class="down_images">tus imagenes</div>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tincidunt diam. Donec consectetur, tortor ut ullamcorper dignissim, quam gravida nec. Aenean sit amet velit enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ultricies ornare urna, vel accumsan tortor suscipit nec. Duis in risus lectus, sed tempor erat.</p>
<div class="down_images">tus imagenes</div>
</div>
</body>
</html>
Alo
Gracias!!!, voy a probarlo ahora mismo y os cuento.....a ver que tal...
Alo
Funciona perfecto!, Gracias Juanmanuelalcon.com...
Por cierto Cloudstudio, muy interesante el jquery que propones...
Un saludo!!!!
Cloudstudio
Alo
Sirve para otra cosa, te entendi mal, con la imagen que has puesto esta todo mas claro.
Rolan Gonzalez
caween he llegado tarde para lucirme jajaja, la explicacion del contenedor en relative: perfecta.
Vmv
¬¬ y ya ibamos a por jquery...