2012-05-04 87 views
0

這個CSS有點難以弄清......基本上我想要的是這張圖片裏有什麼,但是動態地改變內容。CSS中心分層動態div

enter image description here

所以我成立了我的HTML這樣的,基本上所有的元素堆砌成的包裝,圖片和標題將是動態的旋轉,將是不同的寬度和高度:

<div id="wrapper"> 
<div id="title"><h2></div> 
<div id="image"><img></div> 
<div id="leftbutton" class="but"><img></div> 
<div id="rightbutton" class="but"><img></div> 
</div> 

我試過的一切都沒有解決。我應該怎麼做呢?

我得到的最接近的是這個,但標題欄可以改變高度,這使得這種方法不起作用,因爲我必須定位圖像相對位置,它的相對位置隨標題元素的增長和縮小而變化:

#wrapper{ 
position:relative; 
text-align: center; 
} 
.but{ 
z-index:20; 
position:absolute; 
} 
#leftbutton{ 
left:0px; 
} 
#rightbutton{ 
right:0px; 
} 
#title{ 
z-index: 3; 
display: inline-block; 
width:auto; 
min-width: 80px; 
max-width: 340px; 
} 
#image{ 
z-index: 1; 
position: relative; 
top:-21px; 
} 
+0

你可以發佈你已經嘗試過的東西嗎(整齊地請)? –

+0

我試過的東西是很多事物的組合,然而,每種方法總是有一個致命弱點 –

+0

阿基里斯沒有治癒任何人。他的腳跟雖然是他的弱點:)。回到生意,你的標記是有缺陷的。它使「標題」和「圖像」在與「左鍵」和「右鍵」相同的水平... –

回答

1

如果你的意思是在該中心使用的標題是這樣的:

#title { 
    margin: 0 auto; 
    width: /* your width */ 
} 

的位置應該是相對的包裝。

JsFiddle UP

我剛剛重組的車身結構,增加多一個DIV和浮動一切。 然後在中間部分,我添加了標題和圖像,您可以將樣式定位到相對的div。

+0

我需要居中標題和圖像,我需要圖像在標題下,標題可以改變高度 –

+0

我爲你建立一個JsFiddle。 –

+0

完成後,看看。顯然你需要更好地設計風格。 –

0

如果您提供了一些示例代碼,我們將能夠更好地爲您提供幫助。在此期間,下面的代碼應該照顧你要找的東西:

HTML

<div id="wrapper"> 
    <div id="title"><h2>Article Headline</h2></div> 
    <div id="image"><img></div> 
    <div id="leftbutton"><img></div> 
    <div id="rightbutton"><img></div> 
</div>​ 

CSS

​#wrapper { 
    background:#6cb6d9; 
    display:inline-block; 
    position:relative;} 

#title { 
    position:absolute; 
    top:0; 
    width:100%; 
    text-align:center;} 

#title h2 { 
    background:green; 
    color:white; 
    padding:10px 15px 10px 15px; 
    display:inline-block; 
    max-width:200px} 

#image {} 

#image img { 
    min-width:200px; 
    height:300px; 
    width:500px; } 

#leftbutton { 
    position:absolute; 
    left:0; 
    top:0; 
    height:100%; 
    width:75px; 
    background:black;} 

#rightbutton { 
    position:absolute; 
    right:0; 
    top:0; 
    height:100%; 
    width:75px; 
    background:black;} 

雖然不是硬編碼的IMG大小,只需刪除這些線CSS讓div自動調整爲img的默認大小。

http://jsfiddle.net/b7c7c/

+0

這看起來像是可以工作 –

+0

問題在於圖像設置了包裝的大小,如果標題比要切斷的圖像更寬 –

+0

好點A_funs。現在我在這裏添加一個最小寬度和最大寬度。 – ndcomix