Question

请参考下图（browserscreen）： A，B，C和D是div。 A和C具有固定的高度和宽度= 100％。 D是以B为中心的div。有人可以帮助用css代码来完成这个吗？

如果可能，必须与IE6兼容。

This is your browserscreen

Answer 1

您可以使用各种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%;
}

See Demo

Answer 2

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/

Answer 3

试试这个html＆amp; 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;
}

http://jsfiddle.net/rakesh_vadnal/JjPcX/3/

中心3划分水平全屏

3 个答案: