コンテナの底にHTML要素を積み重ねる

私は2つの画像要素を子として持つdiv（固定幅を持つ）を持っています。コンテナの底にHTML要素を積み重ねる

各画像はdivと同じ幅になるので、画像は同じ行に配置されません（see screenshot）。
これは素晴らしいですが、画像を同じ方法（上下に表示）で表示したいのですが、divの下部に表示します。

は、私が使用して一部のブラウザでは、このような動作を実現することができるよ：DIV CSSで

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

。

これを実現するにはより良い方法がありますか？ここで

は、私が例に使用されるコードは次のとおりです。

<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

これにより、両方の画像が下に配置されます（2番目の画像は最初に隠れています）。私はそれらを積み重ねてほしい。最初のものは底に、次のものはその真上にある。 – Danny

そして、 'style =" bottom：33px; "'を最初の 'IMG'要素に追加します。 –

あなたのものがハードコーディングされている場合は、イメージを「内部コンテナ」要素でラップし、絶対位置と下部を持つように設定する必要があります：0 –

ソリューション：一番下にその位置を中わた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要素を積み重ねる

答えて

関連する問題