在容器底部堆疊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元素

回答

相關問題