コンテナdiv内のレイヤー3 divとレイヤーdiv

Question

コンテナdiv内にレイヤー3divをレイヤーして重ね合わせる必要があります。これについてどうすればいいですか？

これはHTMLである：

<div class="outer"> 
    <div class="top"></div> 
    <div class="middle"><span class="inside-middle"></span></div> 
    <div class="bottom"></div> 
</div> 

.outerは.middle、容器及び.topと.bottomお互いの上にすべてであり、すべて同じ高さと幅です。

。インサイド - ミドルは、テキストを右に揃えています。

アドバイスをいただければ幸いです。

Answer 1

編集が簡単です。あなたの便宜のために色付きのボーダーが追加されました...

.outer{ 
position:relative; 
height:200px; 
width:200px; 
border:solid blue 1px; 
} 

.top, .middle, .bottom{ 
height:200px; 
width:200px; 
border:solid red 1px; 
top:0; 
left:0; 
position:absolute; 
} 

.bottom{ 
border:solid orange 1px; 
} 

.middle{ 
border:solid green 1px; 
} 

.inside-middle{ 
text-align:right; 
display:block; 
} 

Answer 2

ブロックレベル要素への変更以外。それは、あなたが後になっている、かなりストレートな実装のように聞こえます。

私は一緒にテキスト整列は、スパンのようなインライン要素を何もしないようあなたは、同様にブロックレベル要素であることを内部で中間たいhttp://jsfiddle.net/AjuaV/2/

でサンプルを置きます。