三列布局幾種經典實現方式

今天咱們來總結一下經典的三列布局的實現。

三列布局，通常指兩端固定寬度，中間寬度自適應的佈局方式，這種佈局應用還蠻普遍的，好比菜鳥編程：

實現方式大方向來看有差很少四種：

一、絕對定位

這能夠算是最簡單的一種了，關鍵點在於中間版塊不給寬度，經過左右絕對定位left和right實現自適應,話很少說直接上代碼

.container {
    width: 500px;
    height: 800px;
    background-color: #eee;
    margin: 0 auto;
    position: relative;
    border: 2px solid #333;
}

.left {
    position: absolute;
    left: 0;
    width: 100px;
    height: 800px;
    background-color: green;
}

.right {
    position: absolute;
    right: 0;
    width: 200px;
    height: 800px;
    background-color: blue;
}

.middle {
    position: absolute;
    left: 100px;
    right: 200px;
    height: 800px;
    background-color: red;
}
複製代碼

二、兩側浮動+中間自動撐開

兩側浮動很簡單，只須要用到float便可。

.left {
    width: 100px;
    height: 800px;
    background: green;
    float: left;
}

.right {
    width: 150px;
    height: 800px;
    background: blue;
    float: right;
}
複製代碼

中間自適應的方式有不少，能夠經過display:block實現，也能夠經過calc()計算出寬度，或者給左右固定margin等方式實現

.middle {
    height: 800px;
    background: red;
    display: block;
}
複製代碼

三、聖盃佈局和雙飛翼佈局

挺有意思的名稱，看一下下面這段代碼：

<div class="container">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
複製代碼

.middle {
    width: 100%;
    height: 100%;
    background: red;
    float: left;
}

.left {
    width: 100px;
    height: 100%;
    background: green;
    margin-left: -100%;
    float: left;
}

.right {
    width: 150px;
    height: 100%;
    background: blue;
    margin-left: -150px;
    float: left;
}
複製代碼

效果如圖：

聖盃佈局和雙飛翼佈局在這裏的思路都是同樣的，經過三欄float和負margin達到三列並列效果。不一樣的地方在於處理中間板塊被遮擋的方法。

先來看一看聖盃佈局： 給最外層左右padding等於左右板塊的寬度，再經過相對定位把左右板塊往兩邊拉

.container{
    padding: 0 150px 0 100px;
}
.left{
    position: relative;
    left: -100px;
}
.right{
    position: relative;
    right: -150px;
}
複製代碼

而雙飛翼佈局則是經過內層加margin的方式，讓內層元素恰好定位到露出部分

<div class="container">
    <div class="middle">
        <div class="inner">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
複製代碼

.inner {
    margin: 0 150px 0 100px;
}
複製代碼

完成後的佈局以下：

四、經過特定佈局實現，好比flex/grid/table佈局

這些特殊佈局這裏就不特意貼代碼了，均可以實現三列布局。

如下是引用小火柴的藍色理想博客中的一段話:

不管是什麼佈局方式，無外乎須要應用float、inline-block、table、absolute、flex、grid這6種佈局屬性，
而後再配合負margin、calc()函數、bfc、增長結構等來實現佈局

自適應包括兩種狀況：一種是寬度由內容撐開，一種是寬度自動撐滿父元素剩餘寬度
可實現寬度由內容撐開的屬性有： float、inline、inline-block、table、table-cell、absolute、fixed、flex、grid
可實現寬度自動撐滿父元素剩餘寬度的屬性有： overflow(配合float)、table、flex、grid
複製代碼

---

朝聞道，夕死可矣