Question

这一点有些难于说明...... 从根本上讲,我想的是这一局面,但内容不断变化。

“entergraph

so I set up my html like this, basically all the elements are piled into the wrapper, the pictures and titles will be dynamically rotating and will be different widths and heights:

<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>

我曾尝试过Hasn t。我应如何做到这一点?

我最接近的是这一点,但标题领域可能改变高点,使这种方法无法奏效,因为我不得不将图像及其相对位置的变化与标题要素的扩大和缩小:

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

Answer 1

If you mean the Title in the center use this way:

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

职位应该相对平衡。

<http://jsfiddle.net/Zpa9n/1/"rel=“nofollow”>JsFiddle UP

I just reorganized the body structure, adding one more div and floating everything. Then inside the central section I added title and image that you can style to be centered to the relative div.

Answer 2

如果你提供了一些实例,我们将能够更好地协助你。同时,以下法典应照顾到你回顾的:

传真

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

虽然不严格控制免疫机能,但只是排除了中央安全局的这些线线,使之自动适应成像的缺省规模。

rel=“nofollow>http://jsfiddle.net/b7c7c/

Answer 3

这些解决办法没有一个是正确的,最终如何使其发挥作用,是用这一trick计:。如何将绝对位置放在干iv中?

然后,你就把所有要素完全放在总结中,而后一要素则相对而言。

友情链接