4種方法實現邊欄固定中間自適應的3欄佈局

設計一個頁面，常常會遇到3欄佈局，包括左右邊欄和中間主題內容，通常狀況下都是邊欄固定，中間自適應，經常使用的方法主要有4種：自身浮動、絕對定位，margin負值和flex佈局，今天主要一塊兒看一看這種佈局的實現，首先來看一看效果：

See the Pen QwRzqL by superlin (@superlin) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

基礎樣式我就不說明了，能夠看源碼，這裏只看重要代碼。

自身浮動

先看html代碼，結果比較簡單：

html<div class="self-float">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>

這種方法比較簡單，左右定寬度分別進行左浮動和右浮動，此時主內容列主會自動插入到左右兩列的中間，設定左右margin爲兩邊邊欄的寬度便可：

css.self-float .left{
  float: left;
}
.self-float .right{
  float: right;
}
.self-float .main{
  margin: 0 100px;
}

絕對定位

html代碼結構和前一種方法相似：

html<div class="absolute-pos">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>

這種方法比較直觀，容易理解：左右兩欄採用絕對定位，固定於頁面的左右兩側，主內容列用左右margin值撐開距離。

css.absolute-pos {
  position: relative;
}
.absolute-pos .left{
  position: absolute;
  left: 0;
  top: 0;
}
.absolute-pos .right{
  position: absolute;
  right: 0;
  top: 0;
}
.absolute-pos .main{
  margin: 0 100px;
}

margin負值

這種方法就稍微複雜了一些了，使用的是負的margin值，並且html標籤也增長了，中間的主體要使用雙層標籤，先看代碼。

html<div class="margin-negative">
  <div class="main">
    <div class="content"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>

外層div寬度100%顯示，而且浮動，內層div爲真正的主體內容，含有左右100像素的margin值。左欄與右欄都是採用margin負值定位的，左欄左浮動，margin-left爲-100%，正好使左欄div定位到了頁面的左側；右側欄也是左浮動，其margin-left也是負值，大小爲其自己的寬度即100px，這樣正好填補了右邊。

css.margin-negative .main{
  width: 100%;
  float: left;
}
.margin-negative .main .content {
  margin: 0 100px;
}
.margin-negative .left {
  float: left;
  margin-left: -100%;
}
.margin-negative .right {
  float: left;
  margin-left: -100px;
}

flex佈局

結果依而後前兩種類似，代碼以下。

html<div class="flex-container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>

這種實現特別簡單，外層div被設定爲伸縮佈局，內層左右邊欄寬度固定位100像素，而中間內容區main空間分配比例爲1，即將剩餘空間按1:1所有分配給main，這樣才實現了中間的寬度的自適應。

css.flex-container{
  display: -webkit-flex;
  display: flex;
}
.flex-container .main{
  -webkit-flex: 1;
  flex: 1;
}

---

若是你還有好的方法，請必定給我留言哦

歡迎光臨小弟博客：Superlin's Blog
個人博客原文：4種方法實現邊欄固定中間自適應的3欄佈局