処置：
問題の聖杯フライングウィングのレイアウトやソリューション同じですが、それは文書フローをレンダリングフロントケーブル上の中間バーに真ん中の3列レイアウト適応の両側に固定幅である。
区別：
杯レイアウト：中間コンテンツにではありません約2列は中間の移動を阻止しないDIV後のように、相対的な交配と左右特性：、ブロックされたDIVパディング左、右の中間の組と左右2つのDIV相対配置位置と、後方パディング右に残っていますDIV。
フライングウィング：メディアコンテンツが左2 DIV変化DIVの位置に関するマージン左マージンから右を使用して、直接DIV内のコンテンツの中央に配置されたDIVサブを作成するためにブロックされていません。
/**圣杯布局代码**/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="hd">
Header
</div>
<div id="bd">
<div id="middle">
middle
</div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</body>
</html>
<style type="text/css">
#hd{
height: 50px;
background: #666;
text-align: center;
}
#bd{
/*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
padding:0 200px 0 180px;
height:100px;
}
#middle{
float: left;
width: 100%;
height: 100px;
background: blue;
}
#left{
float: left;
width: 180px;
height: 100px;
margin-left: -100%;
background: #0c9;
/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
position:relative;
left:-180px;
}
#right{
float: left;
width: 200px;
height: 100px;
margin-left: -200px;
background: #0c9;
position: relative;
right: -200px;
}
</style>
/**双飞翼布局**/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="hd">
header
</div>
<div id="md">
<div id="inside">
middle
</div>
</div>
<div id="left">
left
</div>
<div id="right">
right
</div>
<div id="footer">
</div>
</body>
</html>
<style type="text/css">
#hd{
height: 50px;
background: #666;
text-align: center;
}
#md{
float:left;
width:100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
}
/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/
#inside{
margin:0 200px 0 180px;
height:100px;
}
#footer{
clear:both; /*记得清楚浮动*/
height:50px;
background: #666;
text-align: center;
}
</style>