兩側(cè)兩列固定寬度，中間列自適應(yīng)寬度
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列</title>
<style>
#content:after{
content: '';
display: block;
clear: both;
}
.menu{
width: 100px;
height: 500px;
background: pink;
float: left;
}
.aside{
width: 200px;
height: 500px;
background: yellow;
float: right;
}
.main{
margin-left: 110px; /*為什么要加margin-left*/
margin-right: 210px;
height: 400px;
background: red;
}
#footer{
background: #ccc;
}
</style>
</head>
<body>
<div id="content">
<!-- 為什么不是main在前面 -->
<div class="menu">aside</div>
<div class="aside">aside</div>
<div class="main">content</div>
</div>
<div id="footer">footer</div>
</body>
</html>
為什么要加margin-left和margin-right？
為了使main的內(nèi)容可以正常顯示，不容會被左右浮動的menu和aside遮蓋住一部份
為什么不是main在前面？
如果main在前，因為main為塊級元素。瀏覽器渲染時，會將它獨占一行，那么接下去的兩個浮動元素就會在main的下面一行進行浮動，無法實現(xiàn)浮于main 上方的效果。
圣杯布局
圣杯布局解決了什么問題？
使得三欄布局中間的區(qū)塊可以在在dom元素次序中優(yōu)先位置。
實現(xiàn)
注釋編號為實現(xiàn)順序
<style>
#content:after{
content: ''; /*8*/
display: block; /*8*/
clear: both; /*8*/
}
#content{
padding-left: 100px; /*5*/
padding-right: 150px; /*5*/
}
.aside, .main, .extra{
float: left; /*2*/
}
.aside{
width: 100px; /*1*/
height: 300px; /*1*/
background: red; /*1*/
margin-left: -100%; /*4*/
position: relative; /*6*/
left: -100px; /*6*/
}
.extra{
width: 150px; /*1*/
height: 300px; /*1*/
background: yellow; /*1*/
margin-left: -150px; /*5*/
position: relative; /*7*/
left: 150px; /*7*/
}
.main{
height: 350px; /*1*/
background: blue; /*1*/
width: 100%; /*3*/
}
</style>
<div id="content">
<div class="main">main</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
實現(xiàn)demo
缺點：
.main的最小寬度不能小于.aside的寬度。原因為margin-left: -100%;不足以偏移掉整個元素的寬度。
雙飛翼布局
所以有了雙飛布局來解決圣杯布局這個缺點
實現(xiàn)
注釋編號為實現(xiàn)順序
<style>
#content:after{
content: ''; /*8*/
display: block; /*8*/
clear: both; /*8*/
}
#content{
}
.aside, .main, .extra{
float: left; /*2*/
}
.aside{
width: 100px; /*1*/
height: 300px; /*1*/
background: red; /*1*/
margin-left: -100%; /*4*/
}
.extra{
width: 150px; /*1*/
height: 300px; /*1*/
background: yellow; /*1*/
margin-left: -150px; /*5*/
}
.main{
/* background: blue; */ /*第1步添加，第7步注釋掉*/
/* height: 350px; */ /*第1步添加，第7步注釋掉*/
width: 100%; /*3*/
}
.wrap{
margin-left: 100px; /*6*/
margin-right: 150px; /*6*/
background: blue; /*7*/
height: 350px; /*7*/
}
</style>
<div id="content">
<div class="main">
<div class="wrap">main</div>
</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
