2012-05-04 88 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