在CSS布局中有一種經(jīng)典的布局是圣杯布局。
吶~就是上面圖片這樣的，左右兩邊有個耳朵，中間呢是盛水的容器。
在頁面上的顯示效果就是左右兩邊是個固定的寬度，中間的容器自適應(yīng)；即根據(jù)頁面大小的變化而變化。
在開發(fā)中常用來做功能區(qū)域的劃分。左邊是一個導(dǎo)航菜單，右邊是廣告或者文章的列表，中間是主要的內(nèi)容顯示區(qū)域。
下面看看這個布局是怎么實現(xiàn)的；
1.基本的布局結(jié)構(gòu)
<div class="container">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
現(xiàn)在給代碼里面添加一些內(nèi)容：
<div class="container">
<div class="middle">
<h4>我是middle</h4>
<p>我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分</p>
</div>
<div class="left">
<h4>我是left</h4>
<p>我是left的內(nèi)容</p>
</div>
<div class="right">
<h4>我是right的內(nèi)容</h4>
<p>我是right的內(nèi)容</p>
</div>
</div>
再來一些樣式代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
*{margin:0;padding:0;}
body{background-color: #cccc;text-align:center;}
header{height:50px;background-color: pink;line-height:50px;}
.container{padding:0 220px 0 200px;}
.middle,.left,.right{
min-height: 300px;
}
.middle{background-color: red;width:100%;}
.left{width:200px;background-color: yellow;}
.right{width:220px;background-color: blue;}
</style>
</head>
<body>
<header>
<h2>我是header</h2>
</header>
<div class="container">
<div class="middle">
<h4>我是middle</h4>
<p>我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分</p>
</div>
<div class="left">
<h4>我是left</h4>
<p>我是left的內(nèi)容</p>
</div>
<div class="right">
<h4>我是right的內(nèi)容</h4>
<p>我是right的內(nèi)容</p>
</div>
</div>
</body>
</html>
出來的效果是這樣的
看上面的圖，我們來分析一下如何讓left和right分別到middle的兩邊去？
現(xiàn)在他們都還是塊級元素，所以都是獨占一行。圣杯布局要讓他們都在一行顯示，可以使用display變?yōu)閕nline-block，也可以使用浮動脫離標(biāo)準(zhǔn)流。
這里常用的方式是浮動,修改style中的代碼
.middle,.left,.right{
float:left;
min-height: 300px;
}
效果是這樣
設(shè)置完浮動發(fā)現(xiàn)，怎么成了兩行？沒有在一行上顯示？
因為midlle為了實現(xiàn)自適應(yīng)的效果，已經(jīng)設(shè)置了width:100%獨占了一行，左右兩邊的空白區(qū)域是父容器.container的padding:0 220px 0 200px;
這里怎么能讓left和right能到上一行去呢？
這里就考慮到盒子的外邊距margin了。給left盒子設(shè)置margin-left:-220px;可以保證left盒子能移動到上一行去，但是他是在middle盒子的最右邊的部分，要讓他移動到最左邊就要設(shè)置margin-left:-100%;當(dāng)left盒子上去以后，right盒子設(shè)置margin-left:-220px;就能夠到上一行的位子去了。
到了這里基本上的布局已經(jīng)完成的差不多了，但是左右還是有空白的部分。這時產(chǎn)品發(fā)話了讓你把左右空白填滿，怎么辦？使用定位啊~
.middle,.left,.right{
position:relative;
float:left;
min-height: 300px;
}
然后修改left和right這兩個盒子的定位屬性，讓他們分別像左右移動自己盒子的寬度
.left{width:200px;background-color: yellow;margin-left:-100%;left:-200px;}
.right{width:220px;background-color: blue;margin-left:-220px;right:-220px;}
正常窗口
縮小的窗口
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
*{margin:0;padding:0;}
body{background-color: #cccc;text-align:center;}
header{height:50px;background-color: pink;line-height:50px;}
.container{padding:0 220px 0 200px;}
.middle,.left,.right{
position:relative;
float: left;
min-height: 300px;
}
.middle{background-color: red;width:100%;}
.left{width:200px;background-color: yellow;margin-left:-100%;left:-200px;}
.right{width:220px;background-color: blue;margin-left:-220px;right:-220px;}
</style>
</head>
<body>
<header>
<h2>我是header</h2>
</header>
<div class="container">
<div class="middle">
<h4>我是middle</h4>
<p>我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分我是內(nèi)容部分</p>
</div>
<div class="left">
<h4>我是left</h4>
<p>我是left的內(nèi)容</p>
</div>
<div class="right">
<h4>我是right的內(nèi)容</h4>
<p>我是right的內(nèi)容</p>
</div>
</div>
</body>
</html>
