关于圣杯布局，圣杯布局效果和双飞翼相似；区别只是双飞翼要活用margin值，但是圣杯要灵活运用padding值和定位。
具体实施方法如下；
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
min-width: 200px;
}
.div{
width: 50%;
height: 200px;
margin: auto;
position: relative;
padding: 0 200px 0 200px;
}
.center{
width: 100%;
height: 200px;
background: blue;
float: left;
position: relative;
}
.center img{
width: 100%;
height: 200px;
display: block;
}
.left{
width: 200px;
height: 200px;
background: magenta;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
width: 200px;
height: 200px;
background: chartreuse;
float: left;
margin-left: -200px;
position: relative;
left: 200px;
}
</style>
</head>
<body>
<div class="div">
<div class="center">
<img src="img/timg.jpg"/>
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
