双飞翼布局：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>圣杯布局</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,
.footer{
border: 1px solid #333;
background: #aaa;
text-align: center;
}
.middle,
.left,
.right{
float: left;
min-height: 200px;
position: relative;
}
.container{
}
.left{
margin-left: -100%; //是向左移动container的content的宽度个px
width:200px;
background-color: gray;
}
.right{
margin-left: -200px; //向左移动200px
width: 200px;
background-color: gray;
}
.middle{
background-color: blue;
width: 100%;
}
.middle-inner{
margin:0 200px; //缩小middle的content的宽度，从而不被left和right覆盖
}
.footer{
clear: both;
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="container">
<div class="middle">
<div class="middle-inner">
<p>HHHHHHHHHHHHHHHHHHHHHH
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
HHHHHHHHHHHHHHHHHHHHHH
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</p>
</div>
</div>
<div class="left">
<p>oooooooooooooo
00000000000000000
ooooooooooooooo
ooooooooooooooo
000000000000000</p>
</div>
<div class="right">
<p>BBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBB
88888888888888888888</p>
</div>
</div>
<div class="footer">
<h4>footer</h4>
</div>
</body>
</html>
* { margin: 0; padding: 0 }
body { min-width: 700px }
.header,.footer { border: 1px solid #333; background: #aaa; text-align: center }
.middle,.left,.right { float: left; min-height: 200px; position: relative }
.container { padding: 0 200px }
.left { margin-left: -100%; left: -200px; width: 200px; background-color: gray }
.right { margin-left: -200px; left: 200px; width: 200px; background-color: gray }
.middle { background-color: blue; width: 100% }
.middle-inner { }
.footer { clear: both }
header
HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
oooooooooooooo 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000
BBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBB 88888888888888888888
footer
圣杯布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>圣杯布局</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,
.footer{
border: 1px solid #333;
background: #aaa;
text-align: center;
}
.middle,
.left,
.right{
float: left;
min-height: 200px;
position: relative;
}
.container{
padding: 0 200px;
}
.left{
margin-left: -100%; //将left与middle左边对齐
left: -200px; //在将left向左移动200px，填充padding-left留下的空白
width:200px;
background-color: gray;
}
.right{
margin-left: -200px; //将right和middle的右边对齐
left: 200px; //在将right向右移动200px；填充padding-right留下的空白
width: 200px;
background-color: gray;
}
.middle{
background-color: blue;
width: 100%;
}
.middle-inner{
/*margin:0 200px;*/
}
.footer{
clear: both;
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="container">
<div class="middle">
<div class="middle-inner">
<p>HHHHHHHHHHHHHHHHHHHHHH
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
HHHHHHHHHHHHHHHHHHHHHH
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</p>
</div>
</div>
<div class="left">
<p>oooooooooooooo
00000000000000000
ooooooooooooooo
ooooooooooooooo
000000000000000</p>
</div>
<div class="right">
<p>BBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBB
88888888888888888888</p>
</div>
</div>
<div class="footer">
<h4>footer</h4>
</div>
</body>
</html>
效果和双飞翼一样，其实还可以用flex弹性布局，也可以达到同样的效果
原文地址：https://www.cnblogs.com/171220-barney/p/8587721.html