CSS 3層div在一個容器div在彼此的頂部

我需要在一個容器div內層3 div，並讓他們在彼此之上。我如何去做這件事？CSS 3層div在一個容器div在彼此的頂部

這是HTML：

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

.outer是容器和賽拓樸，.middle和.bottom都在海誓山盟的頂部，並都具有相同的高度和寬度。

。內側中間的文字在右邊對齊。

任何意見是非常感謝。

來源

2011-10-18 Cybercampbell

是否有他們必須是跨度元素的原因？既然你想讓它們成爲塊元素，爲什麼不讓它們成爲div呢？ –

@DoozerBlake，謝謝..更新到div – Cybercampbell

@DoozerBlake，但我現在需要什麼css？ – Cybercampbell

這是一個更容易閱讀編輯。爲方便您添加彩色邊框...

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

來源

2011-10-18 02:29:26

除了更改塊級元素。這聽起來像是一個非常直接的實現，你有一些定位讓它們堆疊在一起。

我把一個樣品在http://jsfiddle.net/AjuaV/2/

你想裏面，中間是一個塊級元素，以及，如文本對齊不喜歡跨度內聯元素做任何事情。

來源

2011-10-18 02:23:52

對不起。我的意思是堆疊在上面，所以他們都分享相同的位置。我希望這會讓你更有意思。 – Cybercampbell

http://jsfiddle.net/AjuaV/2/你需要考慮定位。 –

CSS 3層div在一個容器div在彼此的頂部

回答

相關問題