7种方式实现3栏布局-CSDN博客

7种方式实现3栏布局

要求：左右定宽，中间自适应

浮动

思路
- 结构上主体区放在最后面保证与浮动元素同行，侧边栏各自左右浮动，主体区触发BFC后不受浮动元素影响。

<section class="layout float">
  <style>
    .layout.float{
      overflow: auto;
    }
    .layout.float aside{
      float: left;
      width: 200px;
      height: 100px;
      background-color: RGBA(0, 195, 217, .5);
    }
    .layout.float aside.right{
      float: right;
    }
    .layout.float main{
      height: 110px;
      background-color: #ccc;
      overflow: auto;
    }
  </style>
  <article>
    <aside class="left"></aside>
    <aside class="right"></aside>
    <main>float achieving 3 column layout
      <xmp>notice:
        float makes words wrap around img, activing BFC in <main>tag or using .clearfix</xmp>
     </main>
  </article>
</section>
复制代码

绝对定位

思路
- 侧边栏各自定位左右，主体区margin留出等宽距离（或者主体区一起绝对定位，左右定位等宽距离）。

<section class="layout absolute">
  <style>
    .layout.absolute>article{
      position: relative;
    }
    .layout.absolute>article>*{
      position: absolute;
      top: 0;
      height: 100px;
    }
    .layout.absolute aside.left{
      left: 0;
      width: 200px;
      background-color: RGBA(0, 195, 217, .5);
    }
    .layout.absolute aside.right{
      right: 0;
      width: 200px;
      background-color: RGBA(0, 195, 217, .5);
    }
    .layout.absolute main{
      left: 200px;
      right: 200px;
      background-color: #ccc;
    }
  </style>
  <article>
    <aside class="left"></aside>
    <aside class="right"></aside>
    <main>absolute achieving 3 column layout
      <p>cons:
        1.all absolute, parent element loses height</p>
    </main>
  </article>
</section>
复制代码

table

思路
- 包含块display: table设置一行宽度，内部元素display: table-cell，左右侧边栏设置宽度，主体区宽度自适应。

<section class="layout table">
  <style>
    .layout.table{
      margin-top: 130px;
    }
    .layout.table>article{
      display: table;
      width: 100%;
    }
    .layout.table>article>*{
      display: table-cell;
    }
    .layout.table .left,
    .layout.table .right{
      width: 200px;
      height: 100px;
      background-color: RGBA(0, 195, 217, .5);
    }
    .layout.table main{
      background-color: #ccc;
    }
  </style>
  <article>
    <aside class="left"></aside>
    <main>table achieving 3 column layout
      <xmp>
        notice:
        1.table layout height and width
      </xmp>
    </main>
    <aside class="right"></aside>
  </article>
</section>
复制代码

flex

思路
- flexbox实现太简单了，只要注意给主体区flex-grow: 1就能自适应了。

<section class="layout flex">
  <style>
    .layout.flex>article{
      display: flex;
    }
    .layout.flex aside{
      width: 200px;
      height: 100px;
      background-color: RGBA(0, 195, 217, 1.00);
    }
    .layout.flex main{
      flex: 1;
      background-color: #ccc;
    }
  </style>
  <article>
    <aside class="left"></aside>
    <main>flex achieving 3 column layout</main>
    <aside class="right"></aside>
  </article>
</section>
复制代码

grid

思路
- 特意补了下grid布局，在掌握flex的情况下很容易就上手了。

<section class="layout grid">
  <style>
    .layout.grid>article{
      display: grid;
      grid-template: 100px / 200px 1fr 200px;
    }
    .layout.grid aside{
      background-color: RGBA(0, 195, 217, 1.00);
    }
    .layout.grid main{
      background-color: #345;
    }
  </style>
  <article>
    <aside class="left"></aside>
    <main>grid achieving 3 colum layout</main>
    <aside class="right"></aside>
  </article>
</section>
复制代码

圣杯布局

思路
- 圣杯和双飞翼布局是经典的三栏布局，集结了前人的智慧。两者结构上都是把主体区放在侧边栏的前面以保证当时的网速能够先加载主体区的内容呈现给用户。
- 圣杯布局是让侧边栏绝对定位，主要是右侧要left: 100%;margin-left: -width作定位，然后主体区margin留出等宽距离。

<section class="layout grail">
  <style>
    .layout.grail>article{
      position: relative;
    }
    .layout.grail main{
      margin: 0 200px;
      height: 100px;
      background-color: #ccc;
    }
    .layout.grail aside{
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 100px;
      background-color: RGBA(255, 113, 0, .5);
    }
    .layout.grail aside:last-child{
      left: 100%;
      transform: translateX(-100%);
      /* margin-left: -200px; */
    }
  </style>
  <article>
    <main>grail achieving 3 column layout</main>
    <aside></aside>
    <aside></aside>
  </article>
</section>
复制代码

双飞翼

思路
- 主体区要包一层盒子以便作调整让出左右侧边栏的空间。作布局的三元素左浮动，作主体区包裹元素width: 100%，然后左右侧边栏分别用负margin技巧调整自同行左右。
- 注意，对比圣杯的绝对定位，此时右边栏浮动后无法使用transform来调整位置。绝对定位的元素之间可以相互覆盖，而浮动元素会一直漂到其外边缘挨到容器边缘或另外的浮动元素。因为主体区包含块占满，呃呃呃...卡壳，涉及到浮动元素在transform与负margin的渲染机制差异，无力研究，无法解释…好吧，只能记住这个现象了

<section class="layout coupleWings">
  <style>
    .layout.coupleWings aside{
      float: left;
      width: 200px;
      height: 100px;
      background-color: RGBA(255, 241, 169, .5);
    }
    .layout.coupleWings>article>aside:first-of-type{
      margin-left: -100%;
    }
    .layout.coupleWings>article>aside:last-of-type{
      margin-left: -200px;
    }
    .layout.coupleWings .main{
      float: left;
      width: 100%;
    }
    .layout.coupleWings main{
      margin: 0 200px;
      height: 110px;
      background-color: #ccc;
    }
  </style>
  <article class="clearfix">
    <div class="main">
      <main>coupleWings achieving 3 column layout</main>
    </div>
    <aside></aside>
    <aside></aside>
  </article>
</section>
复制代码

preview

总结

实现同样的布局flex与grid布局只要简单几行代码和清晰的HTML结构，通过caniuse可知：flex适用95.71%的浏览器，grid也高达87.25%。
虽然现在前端的技术革新迅猛，但体验和思考整个前端技术发展的过程，何尝不是一种收获。
新技术的目的肯定是着眼某个点有所突破，解决了某方面的问题，是思想在技术上的实现。
警醒自己要带着什么样的态度看待现在的前端——拥抱新技术，了解思维革新的地方，然后在有需要的时候迅速上手（当然前提还是不断学习，打扎实自己的基础）。