CSS分层分组

时间:2014-06-19 17:41:53

标签: css

我希望包含图片的100%宽div包含在我的页面上。 在这些div之上,我想要一个1210px宽的div,我可以放置我的内容。

实施例: http://mudchallenger.com/a-responsivee.html

问题: 如何让蓝色框触摸绿色框,而红色框保持在两个上方?

谢谢!

我目前有这个:

}
#green{
position: absolute;
float:center;
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
background-color: green;
}
#blue{
position: relative;
float:center;
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
background-color: blue;
}
#red{
position: relative;
float:center;
height: 800px;
width: 1210px;
margin: 0 auto;
z-index:2;
background-color: red;
}

2 个答案:

答案 0 :(得分:2)

使用背景图像来完成您想要的任务。只是堆叠你的div,它应该工作得很好。如果您希望自己的内容跨越两个带有背景图片的容器,这是一个不同的故事,但您引用的示例并不是这样。

这里是一个小提琴,接近你想要的实现。只需用背景图片替换容器背景颜色,就可以得到你想要的东西。

http://jsfiddle.net/CfZu4/

<强> HTML:

<div class="container">
    <div class="content">
    Blah
    </div>
</div>
<div class="container red">
    <div class="content">
    Blah
    </div>
</div>

<强> CSS:

.container{
background-color:#00f;
height:200px;
clear:both;
}
.content{
float:right;
width:40%;
height:150px;
margin-top:20px;
background-color:#0f0;
}
.red{
background-color:#f00;
}

答案 1 :(得分:0)

编辑:小提琴的缩小版:

http://jsfiddle.net/dc2bar/asy8Y/2/

HTML:

<div class="background-banner green">
    <div class="main-content red">
        <!-- content -->
    </div>
</div>
<div class="background-banner blue">
</div>

CSS:

.background-banner {
    height: 500px;
    width: 100%;
    margin: 0 auto;
    z-index:1;
}

.main-content {
    position: relative;
    height: 800px;
    width: 70%;
    margin: 0 auto;
    z-index:2;
}

.green{
    background-color: green;
}

.blue{
    background-color: blue;
}

.red{
    background-color: red;
}

再次编辑:删除了无效的css规则。