在容器底部堆叠HTML元素_Html_Css

在容器底部堆叠HTML元素

html css

在容器底部堆叠HTML元素,html,css,Html,Css,我有一个div（固定宽度），它有两个图像元素作为子元素每个图像与div的宽度相同，因此图像不会放置在同一行（）。这很好，但我希望图像以相同的方式显示（一个在另一个之上），但显示在div的底部在某些浏览器中，我可以通过以下方式实现这种行为： -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); 在divcss上有没有更好的方法来实现这一点下面是我在示例中使用的代码： <html> <he

我有一个div（固定宽度），它有两个图像元素作为子元素

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

在某些浏览器中，我可以通过以下方式实现这种行为：

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

在divcss上

有没有更好的方法来实现这一点

下面是我在示例中使用的代码：

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


.container{背景：url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png)无重复；高度：116px；
宽度：33px}

使容器

位置：相对并将图像设置为位置：绝对；底部：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>

解决方案：添加Inner 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>


.container{背景：url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png)无重复；高度：116px；位置：相对；
宽度：33px；}
.inner{位置：绝对；底部：0px；}


感谢Josh的建议。
这会使两个图像都位于底部（第二个图像隐藏第一个图像）。我想让它们堆叠起来——第一个放在底部，下一个放在上面。然后将style=“bottom:33px；”
添加到第一个IMG元素。如果硬编码中没有你的东西，你必须用“内部容器”包装图像元素并将其设置为具有绝对位置和底部：0 Hanks Josh-内部容器正是我所需要的。我认为编辑答案是值得的（所以我可以接受）。@Danny我已经更新了答案。我很高兴你解决了这个问题。
<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>