在容器底部堆叠HTML元素

我有一个div（具有固定宽度），它有2个图像元素作为子元素。在容器底部堆叠HTML元素

每张图像与div的宽度相同，因此图像不在同一行上（see screenshot）。
这很棒，但我希望图像以相同的方式显示（一个在另一个之上），但在div的底部。

我能使用，以实现一些浏览器这样的行为：

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

的DIV + CSS。

有没有更好的方法来实现这一目标？

下面是我用的例子代码：

<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>

来源

2009-11-10 Danny

使容器position:relative;和图像设置为position:absolute; bottom:0;

但是，这不会叠加图像。他们将相互覆盖。如果你需要堆叠，最简单的（动态）方法是用另一个容器（如div）包装图像，然后将其设置为它的样式为。例如...

标记：

<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; 
}

来源

2009-11-10 19:54:54

这会使两个图像都位于底部（隐藏第一个图像的第二个）。我想让它们堆叠 - 最下面一个，下面一个在上面。 – Danny 2009-11-10 20:17:49

然后将'style =“bottom：33px;”'添加到第一个'IMG'元素。 – 2009-11-10 20:27:54

如果硬编码没有你的东西，你将不得不用一个“内部容器”元素包装图像，并设置*它*具有绝对位置和底部：0 – 2009-11-10 20:30:06

解决办法：添加肠子DIV并设置它的位置，底部：

<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>

感谢Josh f或暗示这一点。

来源

2009-11-10 21:58:42 Danny

在容器底部堆叠HTML元素

回答

相关问题