Question

我有一个div（具有固定宽度），有2个图像元素作为孩子。

每个图像的宽度与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>

Answer 1

制作容器position:relative;并将图片设置为position:absolute; bottom:0;

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

标记：

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

Answer 2

解决方案：添加内部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的建议。

在容器底部堆叠HTML元素

2 个答案: