まず、聖杯のレイアウト、
ワイド固体中間適応周り
- 三つのレイアウト、中間適応の幅が、両側の固定幅。
- ブラウザでレンダリングするために優先順位を与えるためにショーの中央部。
具体的な手順：
1.設定された基本パターン
2のレイアウトは、相対レイアウト杯、第一セットの容器の親要素の位置である：
前記本体部の三つのサブ要素が配置され、左フロートある
4.メイン幅幅：100％、単一ライン占有を許可
5は、左外側および右負から提供される
限り6.次にその上の2つのブランクを移動させる右、それぞれ左と、など。相対位置決め移動は、使用左右の部分とすることができます。
コードは以下の通りであります：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>圣杯布局</title>
<style>
body{
margin:0;
}
.box{
margin:0 auto;
width:900px;
height:300px;
background-color:orange;
padding:0 200px;
}
.left{
width:200px;
height:300px;
background-color:red;
float:left;
margin-left:-100%;
position:relative;
left:-200px;
}
.center{
width:100%;
height:300px;
background-color:pink;
float:left;
}
.right{
width:200px;
height:300px;
background-color:blue;
float:left;
margin-left:-200px;
position:relative;
right:-200px;
}
</style>
</head>
<body>
<div class="box">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>レンダリング：
第二に、フライングウイング
ワイド固体中間適応周り
- 右側の2つの中間の上のdiv、DIVをフローティング状態のまま
- マージン左ラインを調整することにより
- 事業部の中間に子ノードを追加し、調整マージンの位置が提供されています
コードは以下の通りであります：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>双飞翼布局</title>
<style>
body{
margin:0;
}
.box{
margin:0 auto;
width:900px;
height:300px;
background-color:orange;
}
.warp{
margin:0 200px;
}
.left{
width:200px;
height:300px;
background-color:red;
float:left;
margin-left:-100%;
}
.center{
width:100%;
height:300px;
background-color:pink;
float:left;
}
.right{
width:200px;
height:300px;
background-color:blue;
float:left;
margin-left:-200px;
}
</style>
</head>
<body>
<div class="box">
<div class="center">
<div class="warp"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>レンダリング：
