本文介紹三種實現(xiàn)圣杯布局的方法,前兩種可歸為一類蛙婴，與第三種方法差別在于加載順序不同废岂。
圣杯布局實現(xiàn)1：
步驟1：給出 HTML結構：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>圣杯布局1</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-Align: center;
}
#top {
background: #666;
height: 60px;
}
#left {
background: #E79F6D;
}
#content {
background: #D6D6D6;
}
#right {
background: #77BBDD;
}
#foot {
background: #666;
height: 50px;
}
</style>
</head>
<body>
<div id="parents">
<div id="top">這是Top!</div>
<div id="main">
<div id="left">這是Left!</div>
<div id="content">這是Content!<br><br><br><br><br><br><br><br><br><br><br><br><br><br>這是多行高度唤蔗！<br></div>
<div id="right">這是Right!</div>
</div>
<div id="foot">這是Foot!</div>
</div>
</body>
</html>
效果如下：
Paste_Image.png
步驟2：
- 設置中間三個div向左浮動格嗅，使其排列在一行：
#left, #content,#right{ float:left;}焕檬。 - 設置Foot元素清除浮動宴霸，阻止與上面的main部分重疊：
#foot { background: #666; height: 50px; clear: both;}镜盯。 - 設置中間三個div的寬度，左右定寬猖败，中間寬度自適應：
#left {
background: #E79F6D;
width: 150px;
}
#content {
background: #D6D6D6;
width: 100%;
}
#right {
background: #77BBDD;
width: 200px;
}
效果如下：
Paste_Image.png
步驟3：
- 現(xiàn)在Content寬度為100%速缆，占滿整個瀏覽器寬度，若想要中間Content給兩邊Left和Right挪出空間恩闻，則需要設置容器main左右
padding值艺糜。 - 由于容器
main內(nèi)元素均設置左浮動，都不在文檔流中幢尚，導致main高度塌陷破停，設置overflow:hidden可解決該問題。
#main{
padding-left: 150px;
padding-right: 200px;
background-color: bisque;
}
效果如下：
Paste_Image.png
步驟4：
由于設置padding后尉剩，中間三個div寬度之和超過瀏覽器寬度真慢，所以各獨占一行，要使Left元素和Right元素分別移動到Content的左右兩邊理茎，則需要給Left設置負的margin-left,給Right設置負的margin-right黑界。
#left {
background: #E79F6D;
width: 150px;
margin-left: -150px;;
}
#right {
background: #77BBDD;
width: 200px;
margin-right: -200px
}
效果如下：
Paste_Image.png
步驟5：
使中間三個div高度自適應，即高度相等且等于高度最大的div皂林，使用內(nèi)外下邊距相抵消的方法：
#left, #content, #right { float:left; padding-bottom: 2000px; margin-bottom: -2000px; }
最終效果如下：
Paste_Image.png
最終代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>圣杯布局1</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-Align: center;
}
#top {
background: #666;
height: 60px;
}
#left, #content,#right{
float:left;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
#main{
padding-left: 150px;
padding-right: 200px;
background-color: bisque;
overflow: hidden;
}
#left {
background: #E79F6D;
width: 150px;
margin-left: -150px;;
}
#content {
background: #D6D6D6;
width: 100%;
}
#right {
background: #77BBDD;
width: 200px;
margin-right: -200px;
}
#foot {
background: #666;
height: 50px;
clear: both;
}
</style>
</head>
<body>
<div id="parents">
<div id="top">這是Top!</div>
<div id="main">
<div id="left">這是Left!</div>
<div id="content">這是Content!<br><br><br><br><br><br><br><br><br><br><br><br><br><br>這是多行高度朗鸠！<br></div>
<div id="right">這是Right!</div>
</div>
<div id="foot">這是Foot!</div>
</div>
</body>
</html>
圣杯布局實現(xiàn)2：
與方法1的前三步相同，在第四步時采用了不同的解決方案：
步驟4-1
通過為Content和Right設置一個負的margin-left屬性：
#content {
background: #D6D6D6;
width: 100%;
margin-left: -150px;
}
#right {
background: #77BBDD;
width: 200px;
margin-left: -200px;
}
效果如下：（此時Left被覆蓋）
Paste_Image.png
步驟4-2
設置Left和Right的positon分別調(diào)整其位置使左移和右移：
#left {
background: #E79F6D;
width: 150px;
position: relative;
left: -150px;
}
#right {
background: #77BBDD;
width: 200px;
margin-left: -200px;
position: relative;
left: 200px;
}
效果如下：
Paste_Image.png
步驟四完成础倍，步驟五同方法1烛占。
最終代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>圣杯布局1</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-Align: center;
}
#top {
background: #666;
height: 60px;
}
#left, #content,#right{
float:left;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#main{
padding-left: 150px;
padding-right: 200px;
background-color: bisque;
overflow: hidden;
}
#left {
background: #E79F6D;
width: 150px;
position: relative;
left: -150px;
}
#content {
background: #D6D6D6;
width: 100%;
margin-left: -150px;
}
#right {
background: #77BBDD;
width: 200px;
margin-left: -200px;
position: relative;
left: 200px;
}
#foot {
background: #666;
height: 50px;
clear: both;
}
</style>
</head>
<body>
<div id="parents">
<div id="top">這是Top!</div>
<div id="main">
<div id="left">這是Left!</div>
<div id="content">這是Content!<br><br><br><br><br><br><br><br><br><br><br><br><br><br>這是多行高度！<br></div>
<div id="right">這是Right!</div>
</div>
<div id="foot">這是Foot!</div>
</div>
</body>
</html>
圣杯布局實現(xiàn)3（先加載主列）：
效果如下：
4770448-f4aeb930e2732d89.png
最終代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<title>polandeme</title>
<meta charset="utf-8">
<style>
body{
color: aliceblue;
}
.main-wrap{
margin-left: 190px;
margin-right: 190px;
}
/*.grid-s5m0e5 { width:100%;}*/
.col-main {
float:left;
width: 100%;
min-height:30px;
background:#000;
}
.col-sub {
float:left;
margin-left: -100%;
width:190px;
min-height:30px;
background:#f00;
}
.col-extra {
margin-left: -190px;
float:left;
width:190px;
min-height:30px;
background:#00f;
}
</style>
</head>
<body>
<div class="grid-s5m0e5">
<div class="col-main">
<div class="main-wrap">
我是主列沟启，出來吧忆家！
</div>
</div>
<div class="col-sub">我是子列</div>
<div class="col-extra">我是附加列</div>
</div>
</body>
</html>
