前言
所謂的圣杯布局，就是三列布局中，左右兩列寬度固定，中間一列的寬度跟隨瀏覽器的寬度的改變而改變。其實現(xiàn)在已經有其它方法也可以實現(xiàn)這種效果，例如CSS3的width:calc(100% - 100px);（注意：減號左右都是有空格的，不然會報錯），只是calc( )只兼容到IE9，這是連IE8都拋棄了的節(jié)奏啊?；蛘呤鞘褂胠ess之類的css預編譯語言來寫樣式，也可以輕松達到這種效果。當然也還有其它方法...
實現(xiàn)圣杯布局
先上完整代碼，copy下來就能使用了
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>圣杯布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 20px;
}
body {
/*第三步，設定body的最小寬度，為了避免瀏覽器的寬度太小，導致第二步中,left模塊的margin-left:-100%;還不夠將自己全部移到與main水平,出現(xiàn)布局錯亂，至于設置多少，就要看自己的left和right的寬度，再結合瀏覽器自己測試了*/
min-width: 1100px;
}
header {
/*第一步*/
width: 100%;
height: 100px;
background: #808080;
}
#content {
/*第三步*/
padding-left: 400px;
padding-right: 300px;
}
#main {
/*第一步*/
width: 100%;
height: 50px;
background: #AABBCC;
/*第二步*/
float: left;
}
#left {
/*第一步*/
width: 400px;
height: 50px;
background: #D6D6D6;
/*第二步*/
float: left;
/*很關鍵的一步，“負margin-left”的絕對值大于left的寬度，可以讓left模塊與main模塊在同一水平線上，當然，如果“負margin-left”的絕對值小于leftd的話，就不行了*/
margin-left: -100%;
/*第三步*/
position: relative;
left: -400px;
}
#right {
/*第一步*/
width: 300px;
height: 50px;
background: #E79F6D;
/*第二步*/
float: left;
margin-left: -300px;
/*第三步*/
position: relative;
right: -300px;
}
footer {
/*第一步*/
height: 100px;
width: 100%;
background: #FFC0CB;
}
</style>
</head>
<body>
<header>頭部 W:100%</header>
<section id="content">
<div id="main">中間 W:100%</div><!-- 中間一列放在最上面 -->
<div id="left">左邊 W:400,margin-left:-100%,relative(left:-400)</div>
<div id="right">右邊 W:300,margin-left:-300,relative(right:300)</div>
</section>
<footer>底部 W:100%</footer>
</body>
</html>
最后的樣式圖為：
最終樣式圖
第一步
進行基本布局，設置每個模塊的background-color,width，上代碼
<body>
<header>頭部 W:100%</header>
<section id="content">
<div id="main">中間 W:100%</div><!-- 中間一列放在最上面 -->
<div id="left">左邊 W:400</div>
<div id="right">右邊 W:300</div>
</section>
<footer>底部 W:100%</footer>
</body>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 20px;
}
header {
/*第一步*/
width: 100%;
height: 100px;
background: #808080;
}
#main {
/*第一步*/
width: 100%;
height: 50px;
background: #AABBCC;
}
#left {
/*第一步*/
width: 400px;
height: 50px;
background: #D6D6D6;
}
#right {
/*第一步*/
width: 300px;
height: 50px;
background: #E79F6D;
}
footer {
/*第一步*/
height: 100px;
width: 100%;
background: #FFC0CB;
}
</style>
效果圖為
第一步
第二步
將main、left、right模塊設置float為left，并利用margin-left將left與right模塊提到與main模塊在同一行，上代碼
<body>
<header>頭部 W:100%</header>
<section id="content">
<div id="main">中間 W:100%</div><!-- 中間一列放在最上面 -->
<div id="left">左邊 W:400,margin-left:-100%</div>
<div id="right">右邊 W:300,margin-left:-300</div>
</section>
<footer>底部 W:100%</footer>
</body>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 20px;
}
header {
/*第一步*/
width: 100%;
height: 100px;
background: #808080;
}
#main {
/*第一步*/
width: 100%;
height: 50px;
background: #AABBCC;
/*第二步*/
float: left;
}
#left {
/*第一步*/
width: 400px;
height: 50px;
background: #D6D6D6;
/*第二步*/
float: left;
/*很關鍵的一步，“負margin-left”的絕對值大于left的寬度，可以讓left模塊與main模塊在同一水平線上，當然，如果“負margin-left”的絕對值小于leftd的話，就不行了*/
margin-left: -100%;
}
#right {
/*第一步*/
width: 300px;
height: 50px;
background: #E79F6D;
/*第二步*/
float: left;
margin-left: -300px;
}
footer {
/*第一步*/
height: 100px;
width: 100%;
background: #FFC0CB;
}
</style>
</head>
第二步中，設置margin-left的值很重要，結果圖為
第二步
第三步
利用main、left、right三個模塊的共同content父模塊的padding，結合left、right模塊的定位，解決第二步中l(wèi)eft、right模塊將main的部分內容遮蓋的問題，上代碼
<body>
<header>頭部 W:100%</header>
<section id="content">
<div id="main">中間 W:100%</div><!-- 中間一列放在最上面 -->
<div id="left">左邊 W:400,margin-left:-100%,relative(left:-400)</div>
<div id="right">右邊 W:300,margin-left:-300,relative(right:300)</div>
</section>
<footer>底部 W:100%</footer>
</body>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 20px;
}
body {
/*第三步，設定body的最小寬度，為了避免瀏覽器的寬度太小，導致第二步中,left模塊的margin-left:-100%;還不夠將自己全部移到與main水平,出現(xiàn)布局錯亂，至于設置多少，就要看自己的left和right的寬度，再結合瀏覽器自己測試了*/
min-width: 1100px;
}
header {
/*第一步*/
width: 100%;
height: 100px;
background: #808080;
}
#content {
/*第三步*/
padding-left: 400px;
padding-right: 300px;
}
#main {
/*第一步*/
width: 100%;
height: 50px;
background: #AABBCC;
/*第二步*/
float: left;
}
#left {
/*第一步*/
width: 400px;
height: 50px;
background: #D6D6D6;
/*第二步*/
float: left;
/*很關鍵的一步，“負margin-left”的絕對值大于left的寬度，可以讓left模塊與main模塊在同一水平線上，當然，如果“負margin-left”的絕對值小于leftd的話，就不行了*/
margin-left: -100%;
/*第三步*/
position: relative;
left: -400px;
}
#right {
/*第一步*/
width: 300px;
height: 50px;
background: #E79F6D;
/*第二步*/
float: left;
margin-left: -300px;
/*第三步*/
position: relative;
right: -300px;
}
footer {
/*第一步*/
height: 100px;
width: 100%;
background: #FFC0CB;
}
</style>
啦啦啦，最后的成果圖
第三步
雖然都是代碼，但是注釋里都有寫過程的呀
吐槽
糾結了一下午要怎么把自己的圖片鏈接到markdown文就上，想過用圍脖是個好圖床來的，后面發(fā)現(xiàn)不能用了。又想著先上傳到圍脖，再get到圖片鏈接，不過礙于圖片水印中圍脖名太那啥，本寶寶有點不好意思拿出手>_<。其實，我也是有服務器的人，先把圖片傳到自己的服務器上，再使用，的確是安全很多，無奈的是，我覺得這比讓我傳圍脖還要麻煩，我也不知道這是什么鬼思維。然后就是，睡了一覺后發(fā)現(xiàn)，友好的簡書思密達在markdown編輯環(huán)境下也是提供圖片上傳的，我真是又豬了......親愛的，請問，您這蠢賣的是給誰看吶？？？
