什么是三欄布局？
三欄布局一般指的是頁面中一共有三欄，左右兩欄寬度固定，中間自適應的布局。
三欄布局
實現(xiàn)方法1. 利用浮動
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
注意：中間的自適應div要放在最后寫。
.wrapper{
width: 700px;
height: 400px;
margin: 0 auto;
}
.wrapper .left{
width: 200px;
height: 400px;
background-color: blueviolet;
float: left;
}
.wrapper .right{
width: 200px;
height: 400px;
background-color: deepskyblue;
float: right;
}
.wrapper .middle{
height: 400px;
background-color: darksalmon;
}
此方法使得中間欄總是最后渲染。
想要優(yōu)先渲染中間欄，可以用到下面的方法。
方法2. 絕對定位布局
<div class="wrapper">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
.wrapper{
width: 700px;
height: 400px;
margin: 0 auto;
position: relative;
}
.wrapper .left{
width: 200px;
height: 400px;
background-color: blueviolet;
position: absolute;
left: 0;
}
.wrapper .middle{
position: absolute;
left: 200px;
right: 200px;
height: 400px;
background-color: darksalmon;
}
.wrapper .right{
width: 200px;
height: 400px;
background-color: deepskyblue;
position: absolute;
right: 0;
}
方法3.flex布局
html同上
.wrapper{
width: 700px;
height: 400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.wrapper .left{
width: 200px;
order: 1;
background-color: blueviolet;
}
.wrapper .middle{
order: 2;
flex:1;
background-color: darksalmon;
}
.wrapper .right{
width: 200px;
order: 3;
background-color: deepskyblue;
}
圣杯布局
圣杯布局就是一種優(yōu)先渲染中間內容的布局。
html：
<div class="wrapper">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
css:
a. 假設我們規(guī)定左側的固定寬度為200px，右側的固定寬度為300px。
.wrapper{
width: 700px;
height: 400px;
padding: 0 300px 0 200px;
margin: 0 auto;
}
得到以下效果
b. 之后我們就要進行中間三列的寬度的設置，同時進行浮動的設置（將中間三列進行左浮動），并且進行高度的設置和定位。
.middle,.left,.right{
float: left;
position: relative;
height: 400px;
}
c. 我們要在.middle的部分進行 width：100%占滿。
.middle{
width: 100%;
background-color: blanchedalmond;
}
d. 此時我們看到.middle占滿了，所以我們現(xiàn)在需要做的就是將.left拉到最左邊，我們就要進行margin-left:-100%,得到下圖效果。
e. 在這個時候我們可以看到，雖然我們將.left拉到了左邊，但是他將中間部分的內容覆蓋掉了，所以我們就要使用相對定位left:-200px。
同理我們也要對.right進行絕對定位.right:-300px
.left{
width: 200px;
margin-left: -100%;
left: -200px;
background-color: cornflowerblue;
}
.right{
width: 300px;
margin-left: -300px;
right: -300px;
background-color: darkslateblue;
}
這樣就完成了三欄布局！
圣杯布局
完整css代碼：
.wrapper{
width: 700px;
height: 400px;
padding: 0 300px 0 200px;
margin: 0 auto;
}
.middle,.left,.right{
float: left;
position: relative;
height: 400px;
}
.middle{
width: 100%;
background-color: blanchedalmond;
}
.left{
width: 200px;
margin-left: -100%;
left: -200px;
background-color: cornflowerblue;
}
.right{
width: 300px;
margin-left: -300px;
right: -300px;
background-color: darkslateblue;
}
雙飛翼布局
雙飛翼布局其實和圣杯布局類似，都是為了實現(xiàn)三欄布局，且中間內容部分優(yōu)先展示
不同點就是圣杯布局利用的是 wrapper 的 padding 來保留左右位置的，而雙飛翼布局利用的是給中間部分（middle）的 margin 來實現(xiàn)的，因為它是在 middle 的外面再次嵌套了一層 div（middle-wrapper）
html
<div class="wrapper">
<div class="middle-wrapper">
<div class="middle"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
- 在wrapper 的三列 center-wrapper、left、right分別設置左浮動
- middler-wrapper 的寬度設置為 100%，left 和 right 的寬度分別設置為 200px、300px ，對 left 設置 margin-left：-100%，使其回到上一行的最左邊
- 對 right 使用 margin-left：-300px，使其回到上一行的最右邊，此時就大功告成
css
.wrapper{
width: 1000px;
height: 400px;
margin: 0 auto;
}
.middle-wrapper,.left,.right{
float: left;
height: 400px;
}
.middle-wrapper{
width: 100%;
background-color: darksalmon;
}
.left{
width: 200px;
margin-left: -100%;
background-color: goldenrod;
}
.right{
width: 300px;
margin-left: -300px;
background-color: darkseagreen;
}
