三欄佈局解決方案彙總

三欄佈局解決方案

三欄佈局，在開發中十分常見，也常做爲面試題做爲一個佈局考點，大體上就是兩邊固定，中間自適應的一種佈局方案，如下彙總出幾種幾種解決方案，供學習與參考。

Float流式佈局

<style type="text/css">
     .left {
      float: left;
      height: 200px;
      width: 100px;
      background-color: red;
    }
    .right {
      width: 200px;
      height: 200px;
      background-color: blue;
      float: right;
    }
    .main {
      margin-left: 120px;
      margin-right: 220px;
      height: 200px;
      background-color: green;
    }
</style>

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

BFC三欄佈局解決方案

// 上面流式佈局中替代main的解決方案
height: 200px;
overflow: hidden;
background-color: green;

絕對定位

聖盃， 雙飛翼解決方案

Table佈局

Flex佈局

grid網格佈局解決方案（目前兼容性尚不大好）

學習總結：常見的三欄佈局實現