实例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta charset="utf-8" />
<style>
.nav,.footer{
width: 100%;
height: 60px;
}
.content{
width: 1000px;
height: 100%;
background-color: lightgrey;
text-align: center;
line-height: 60px;
margin: auto;
}
.container {
/*大盒子整体给固定600像素*/
width: 600px;
/*大盒子整体给黄色背景色*/
background-color:yellow;
/*大盒子整体居中*/
margin:auto;
/*防止子元素溢出*/
overflow: hidden;
/*main挡住了左右区块，加padding*/
padding:0 200px;
}
.main{
/*中间主体给最小高度*/
min-height:600px;
/*中间主体给宽度*/
width:100%;
/*中间主体给背景色*/
background-color: lightpink;
/*中间文本居中*/
text-align: center;
/*中间主体给左浮动*/
float:left;
}
.left{
/*左边主体给宽度*/
width:200px;
/*左边主体给最小高度*/
min-height:600px;
/*左边主体给背景色*/
background-color: lightgreen;
/*左边主体文本居中*/
text-align: center;
/*左边主体给左浮动*/
float:left;
/*左边主体给居左位置*/
margin-left: -100%;
/*左边主体移动*/
position: relative;
left: -200px;
}
.right{
/*右边主体给宽度*/
width:200px;
/*右边主体给最小高度*/
min-height:600px;
/*右边主体给背景色*/
background-color: lightblue;
/*右边主体文本居中*/
text-align: center;
/*右边主体给左浮动*/
float:left;
/*右边主体给居左位置*/
margin-left: -200px;
/*右边主体移动*/
position: relative;
left: 200px;
}
</style>
<title>圣杯翼布局</title>
</head>
<body>
<div class="nav">
<div class="content" >头部</div>
</div>
<div class="container">
<div class="main">中间</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="footer" style="clear: both;">
<div class="content" >底部</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
感悟：网页布局中三列布局中圣杯布局也属于经典布局。