圣杯布局和雙飛翼布局
目的：
1）三欄布局
2）兩側(cè)內(nèi)容固定，中間內(nèi)容隨著寬度自適應(yīng)
3）一般用于PC 網(wǎng)頁
圣杯布局和雙飛翼布局技術(shù)總結(jié)
1）使用float布局
2）兩側(cè)使用margin負(fù)值，以便和中間內(nèi)容橫向重疊
3）防止中間內(nèi)容被兩側(cè)覆蓋，一個用padding一個用margin
圣杯布局的實現(xiàn)
1 container包裹center left right三個元素
2 center left right添加float=left
3 center的width100% left和right隨意大小
4 container左右padding分別設(shè)置為 left right寬度的大小（恢復(fù)到一排后留地方）
5 對于left的操作
#left{
position: relative;
background-color: yellow;
width: 200px;
margin-left: -100%;//正常是在第二行，左移到第一行，和center平齊
right: 200px;//再往前移動自身寬度大小， relative保證了是相對自己移動
}
6 對于right的操作
#right{
position: relative;
background-color:red;
width: 100px;
margin-right: -100px; //把自己擠到上一排
}
完整代碼如下
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
min-width: 550px;
}
#header{
text-align: center;
background-color: #f1f1f1;
}
#center{
background-color: #ccc;
width: 100%;
}
#container{
padding-right: 150px;
padding-left: 200px;
}
#left{
position: relative;
background-color: yellow;
width: 200px;
margin-left: -100%;
right: 200px;
}
#right{
position: relative;
background-color:red;
width: 150px;
margin-right: -150px;
}
#footer{
clear:both;
text-align: center;
background-color: #f1f1f1;
}
.column{
float: left;
}
</style>
</head>
<body>
<div id="header">
this is header
</div>
<div id="container">
<div id="center" class="column">center</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">
this is footer
</div>
</body>
</html>
雙飛翼布局過程
1 center left right 的float：left
2 container給center的左右留空 圣杯用的是padding 雙飛翼用margin：0 190 0 190
3 left操作 margin-left:-100%
4 right操作 margin-right：-190px
完整代碼
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#main{
width: 100%;
height: 200px;
background-color: #ccc;
}
#left{
width: 190px;
height: 200px;
background-color: yellow;
margin-left: -100%;
}
#right{
width: 190px;
height: 200px;
background-color: red;
margin-left: -190px;
}
.col{
float: left;
}
#main-wrap{
margin: 0 190px 0 190px
}
</style>
</head>
<body>
<div id="main" class="col">
<div id="main-wrap">
this is main
</div>
</div>
<div class="col" id="left">left</div>
<div id="right" class="col">right</div>
