（一）前端面试：三栏布局

最新推荐文章于 2023-07-10 16:04:54 发布

程序员柳随风

最新推荐文章于 2023-07-10 16:04:54 发布

阅读量742

点赞数

分类专栏：前端面试文章标签：三栏布局

原文链接：https://coding.imooc.com/class/129.html

版权

前端面试专栏收录该内容

14 篇文章

订阅专栏

文章内容参考自《前端跳槽面试必备技巧》

三栏布局算是面试中一个比较经典的问题了，本文主要讨论左中右形式的三栏布局，给出了五种实现方式，效果图如下：

具体的实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>三栏布局</title>
  <style media="screen">
    html * {
      padding: 0;
      margin: 0;
    }
    .layout article div{
      min-height: 100px;
    }
    .layout{
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

<section class="layout float">
  <style media="screen">
    .layout.float .left{
      float: left;
      width: 300px;
      background: red;
    }
    .layout.float .right{
      float: right;
      width: 300px;
      background: blue;
    }
    .layout.float .center{
      background: yellow;
    }
  </style>
  <article class="left-right-center">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
      <h1>浮动解决方案</h1>
      1.这是三栏布局的中间部分
    </div>
  </article>
</section>

<section class="layout absolute">
  <style>
    .layout.absolute .left-center-right>div{
      position: absolute;
    }
    .layout.absolute .left{
      left: 0;
      width: 300px;
      background: red;
    }
    .layout.absolute .center{
      left: 300px;
      right: 300px;
      background: yellow;
    }
    .layout.absolute .right{
      right: 0;
      width: 300px;
      background: blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>绝对定位解决方案</h1>
      1.这是三栏布局的中间部分</div>
    <div class="right"></div>
  </article>
</section>

<section class="layout flexbox">
  <style>
    .layout.flexbox{
      margin-top: 120px;
    }
    .layout.flexbox .left-center-right{
      display: flex;
    }
    .layout.flexbox .left{
      width: 300px;
      background: red;
    }
    .layout.flexbox .center{
      flex: 1;
      background: yellow;
    }
    .layout.flexbox .right{
      width: 300px;
      background: blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>flexbox解决方案</h1>
      1.这是三栏布局的中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

<section class="layout table">
  <style>
    .layout.table .left-center-right{
      width: 100%;
      display: table;
      height: 100px;
    }
    .layout.table .left-center-right>div{
      display: table-cell;
    }
    .layout.table .left{
      width: 300px;
      background: red;
    }
    .layout.table .center{
      background: yellow;
    }
    .layout.table .right{
      width: 300px;
      background: blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>表格布局解决方案</h1>
      1.这是三栏布局的中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

<section class="layout grid">
  <style>
    .layout.grid .left-center-right{
      display: grid;
      width: 100%;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px;
    }
    .layout.grid .left{
      background: red;
    }
    .layout.grid .center{
      background: yellow;
    }
    .layout.grid .right{
      background: blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>网格布局解决方案</h1>
      1.这是三栏布局的中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

</body>
</html>

简单分析：一二两种方法（浮动，绝对定位）是比较容易想到的，但需要高度做支撑，这里的绝对定位方式会导致父级高度为零；第三种方法（flex布局）是移动端布局经常用到的一种布局方式，pc端要考虑兼容性；第四种方法（表格布局）是一种比较老的方法了，虽然用得少了，但效果不错；第五种方法（网格布局）是新的一种布局方式，需要多了解。

另外：当我们增加内容时，发现flex和表格布局显示较为良好，如下：