请参考下图（浏览器屏幕）：A、B、C 和 D 是 div。A 和 C 具有固定的高度和宽度 = 100%。D是一个以B为中心的div。有人可以帮忙用css代码来完成这个吗？
如果可能，必须与 IE6 兼容。
问问题
996 次
3 回答
0
试试这个 html & css: HTML:
<div class="box-wrap">
<div id="A">A</div>
<div id="B">
<div id="D">D</div>
</div>
<div id="C">C</div>
</div>
CSS：
.box-wrap{
border: 1px solid #000000;
height: 267px;
margin: 10px;
padding: 5px;
width: 357px;
}
#A{margin-bottom:5px;}
#C{margin-top:5px;}
#A,
#C{
background:#857a60;
height:70px;
width:100%;
}
#D{
background:#0096FF;
height: 93px;
margin: 0 auto;
width: 219px;
}
#B{
background: #857A60;
display: table-cell;
height: 117px;
position: static;
vertical-align: middle;
width: 357px;
}
于 2013-01-03T11:04:26.603 回答
0
您可以使用各种 css 属性来获取它。这是一个使用您的依赖项更改此示例的示例
#A{
height: 100px;
background-color: orange;
}
#B{
height: inherit;
}
#D{
display: inline-block;
position: relative;
top: 50%;
left: 50%;
margin-top: 70px;
margin-left:-100px;
}
#C{
height: 100px;
background-color: green;
position: absolute;
bottom: 0px;
width: 100%;
}
于 2013-01-03T10:47:38.487 回答
0
HTML：
<body>
<div id="a">
</div>
<div id="b">
<div id="d">
</div>
</div>
<div id="c">
</div>
</body>
CSS：
body{
width:500px;
background:red;
}
div#a{
height:100px;
width:100%;
border:2px solid black;
margin-bottom:20px;
}
#b{
height:300px;
width:100%;
border:2px solid black;
}
#c{
margin-top:20px;
height:100px;
width:100%;
border:2px solid black;
}
div #d{
height:200px;
width:70%;
background:blue;
margin: 0 auto;
margin-top:50px;
}
我不知道这是否与IE6兼容。你可以试试。我把边界只是为了测试目的。你可以在 CSS 中删除它。JS 小提琴链接：http: //jsfiddle.net/sqrcE/
于 2013-01-03T10:50:25.667 回答