前端頁(yè)面的三欄布局為常見的展現(xiàn)結(jié)構(gòu)棍潘，中間欄(main)的寬度不確定凫岖，左右兩欄的寬度固定娶视。本文總結(jié)回顧經(jīng)典的圣杯布局和淘寶雙飛翼布局叮喳。
| left | main | right |
|---|---|---|
| 固定寬度 | 跟隨窗口的寬度 | 固定寬度 |
圣杯布局：
<!-- 樣式代碼 -->
<style>
* {
margin: 0;
padding: 0;
}
.container {
padding: 0 200px 0 220px;
}
.main, .left, .right {
float: left;
position: relative;
min-height: 130px;
}
.main {
background: yellow;
width: 100%;
}
.left {
background: red;
width: 220px;
margin-left: -100%;
left: -220px;
}
.right {
background: green;
width: 200px;
margin-left: -200px;
right: -200px;
}
</style>
<!-- div結(jié)構(gòu) -->
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
雙飛翼布局：
<!-- 樣式代碼 -->
<style>
* {
margin: 0;
padding: 0;
}
.left,
.main,
.right {
position: relative;
float: left;
min-height: 130px;
}
.left {
margin-left: -100%;
width: 200px;
background: red;
}
.right {
margin-left: -220px;
width: 220px;
background: green;
}
.main {
width: 100%;
background: blue;
}
.inner {
margin: 0 200px 0 220px;
}
</style>
<!-- div結(jié)構(gòu) -->
<div class="container">
<div class="main">
<div class="inner">
inner
</div>
</div>
<div class="left">
<h4>left</h4>
</div>
<div class="right">
<h4>right</h4>
</div>
</div>
