0

下の画像 (ブラウザ画面) を参照してください。A、B、C、D は div です。A と C の高さと幅は 100% に固定されています。D は B を中心とした div です。誰かがこれを達成するために CSS コードを手伝ってくれますか?

可能であれば、IE6 と互換性がある必要があります。

これはあなたのブラウザ画面です

4

3 に答える 3

0

これを取得するには、さまざまなcssプロパティを使用できます。これは、依存関係に応じてこれを変更する1つのサンプルです

#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 に答える
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;
}

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

于 2013-01-03T11:04:26.603 に答える