Apilamiento de elementos HTML en la parte inferior de un contenedor

Tengo un div (con un ancho fijo) que tiene 2 elementos de imagen como elementos secundarios.Apilamiento de elementos HTML en la parte inferior de un contenedor

Cada imagen tiene el mismo ancho que el div, por lo que las imágenes no se colocan en la misma fila (see screenshot).
Esto es genial, pero quiero que las imágenes se muestren de la misma manera (una encima de la otra) pero en la parte inferior de la div.

soy capaz de lograr este tipo de comportamiento en algunos navegadores usando:

-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);

en el css div.

¿Existe alguna manera más agradable de lograr eso?

Este es el código que he usado para el ejemplo:

<html> 
<head> 
<style type="text/css"> 
.container {background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;height:116px; 
width:33px} 
</style> 
</head> 
<body> 
<div class="container"> 
    <img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px"> 
    <img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px"> 
</div> 
</body> 
</html>

Fuente

2009-11-10 Danny

y hacer el contenedor position:relative; y establezca las imágenes para position:absolute; bottom:0;

Sin embargo, esto no va a apilar las imágenes. Se superpondrán entre sí. Si los necesita apilados, la forma más fácil (dinámica) es envolver las imágenes con otro contenedor (como un div) y luego establecer los estilos en . Por ejemplo ...

de marcado:

<div class="container"> 
    <div class="innerContainer"> 
    <img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" /> 
    <img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" /> 
    </div> 
</div>

CSS:

.container { 
    background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat; 
    height:116px; 
    width:33px; 
    position:relative; 
} 

.container .innerContainer { 
    position:absolute; 
    bottom:0; 
}

Fuente

2009-11-10 19:54:54

Esto provoca que ambas imágenes se ubiquen en la parte inferior (la segunda ocultando la primera). Quiero que estén apilados, el primero en la parte inferior, el siguiente justo encima. – Danny

A continuación, agregue 'style =" bottom: 33px; "' al primer elemento 'IMG'. –

Si la codificación no es lo tuyo, tendrás que envolver las imágenes con un elemento "contenedor interno" y establecer * it * para tener la posición absoluta y la parte inferior: 0 –

La solución: Añadir un div innner y fijar su posición a abajo:

<html> 
<head> 
<style type="text/css"> 
.container {background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;height:116px;position:relative; 
width:33px;} 
.inner {position:absolute;bottom:0px;} 
</style> 
</head> 
<body> 
<div class="container"><div class="inner"> 
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px"> 
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px"> 
</div></div> 
</body>

Gracias a Josh f o sugiriendo esto.

Fuente

2009-11-10 21:58:42 Danny

Apilamiento de elementos HTML en la parte inferior de un contenedor

Respuesta

Cuestiones relacionadas