在容器底部堆叠HTML元素

概述我有一个div(具有固定宽度)有2个图像元素作为孩子.每个图像的宽度与div相同,因此图像不在同一行(see screenshot).这很棒,但我希望图像以相同的方式显示(一个在另一个上面),但在div的底部.我能够在某些浏览器中使用以下方法实现此类行为：-webkit-transform: rotate(180deg); -moz-transform:

我有一个div(具有固定宽度)有2个图像元素作为孩子.

每个图像的宽度与div相同,因此图像不在同一行(see screenshot).

这很棒,但我希望图像以相同的方式显示(一个在另一个上面),但在div的底部.

我能够在某些浏览器中使用以下方法实现此类行为：

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

在div CSS上.

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

这是我用于示例的代码：

最佳答案使容器位置：相对;并将图像设置为position：absolute;底部：0;
但是,这不会叠加图像.它们将相互叠加.如果需要堆叠,最简单(动态)的方法是用另一个容器(如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; }
          总结       
以上是内存溢出为你收集整理的在容器底部堆叠HTML元素全部内容，希望文章能够帮你解决在容器底部堆叠HTML元素所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1119739.html