我正在尝试创建类似以下的内容
------------------------------------------
| div 1 |
| __________________________ |
| | div2 on top of div1/div3| |
---------|-------------------------|-------
| | div2 | |
| |_________________________| |
| div3 | | div3 |
| | div4 | |
| | | |
这是我到目前为止所拥有的......
<body>
<div id='div1'></div>
<div id='container'>
<div id='div2'></div>
<div id='div4'></div>
</div>
<div id='div3'></div>
</body>
css
body{
width:980px;
margin:0 auto;
position:relative;
background-color: #EEEEEE;
}
#container{
position:absolute;
top:15px;
}
#div1{
background-color: red;
height: 200px;
width: 1200px;
}
问题是我希望div1扩展整个长度而不是980px。我也希望我的div2和div4在页面中间。在我的CSS中，div1只会像
-------------------------
| div 1 |
|_________________________|
| div2 on top of div1/div3|
|-------------------------|
| div2 |
|_________________________|
| |
| div4 |
| |
任何人都可以帮我吗？非常感谢！
答案 0 :(得分：1)
我添加了background-color和height仅用于提高可见度。我们的想法是，您可以创建div1和div3，并且只需将100％宽度的容器放置得比相对div1低一点。不只是将div2和div4添加到容器的相对宽度较小，例如80％。
<div id='div1'></div>
<div id='container'>
<div id='div2'></div>
<div id='div4'></div>
</div>
<div id='div3'></div>
#container {
position: absolute;
top: 100px;
width: 100%;
}
#div1 {
background-color: red;
height: 200px;
position: relative;
}
#div2 {
background-color: blue;
height: 200px;
width: 80%;
margin: 0 auto;
}
#div3 {
background-color: green;
height: 400px;
}
#div4 {
background-color: yellow;
height: 200px;
width: 80%;
margin: 0 auto;
}
关于你的第二个问题。不幸的是，你不能让div3在纯CSS中变得div4，因为当你给它一个绝对位置时，容器会从文档流中取出，所以你不能创建相对根据它定位。但是，您可以执行以下操作：
您必须手动计算高度。 div4的身高为800px且偏移100px，因此div3必须900px高。别忘了添加它：
body{ margin: 0px; }
如果div3有固定颜色，您可以将body的颜色设置为相同，且边距为零：
body{
background-color: green;
margin: 0px;
}
您只需通过JavaScript获取并设置<div>的高度。