0

这个 css 有点难以弄清楚......基本上我想要的是这张图片中的内容，但内容是动态变化的。

在此处输入图像描述

所以我这样设置我的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;
}
4

3 回答 3

1

如果您指的是中心的标题，请使用以下方式：

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

该位置应该在包装器处是相对的。

JsFiddle UP

我只是重新组织了 body 结构，添加了一个 div 并将所有内容浮动。然后在中心部分我添加了标题和图像，您可以将它们设置为以相对 div 为中心。

于 2012-05-04T19:15:14.603 回答
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/

于 2012-05-04T19:24:57.833 回答
0

这些解决方案都没有正常工作，最终让它工作的方法是使用这个技巧：如何在 div 中将绝对定位的元素居中？

然后，您只需将所有元素绝对定位在包装器中，并且相对地定位子元素，如帖子中所示

于 2012-05-04T20:55:39.700 回答