三栏布局可行的五种方案

遇到一个关于布局的题目，总结了几个可行的方案

题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应可行的办法：

用 float ，左右两边定宽，剩余位置会自动填充，缺点：需要清除浮动，内容超出不可用，解决办法是使用 BFC
用 positon: absolute，缺点：脱离文档流，内容超出不可用
用 display: flex设置容器，然后给左右两栏设定宽度，中间使用 flex: 1,使其填满剩余空间，缺点：兼容性。内容超出也可用
用 dispaly: table，缺点：不够灵活。内容超出也可用
用 display: grid，优点：新技术内容超出也可用

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layout</title>
    <style media="screen">
      html * {
        padding: 0;
        margin: 0;
      }
      .layout {
        margin-top: 20px;
      }
      .layout article div {
        min-height: 100px;
      }
    </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">left</div>
        <div class="right">right</div>
        <div class="center">
          <h2>float 解决方案</h2>
        </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">left</div>
        <div class="center">
          <h2>绝对定位方案</h2>
          这是绝对定位中间部分
        </div>
        <div class="right">right</div>
      </article>
    </section>
    <section class="layout flex">
      <style>
        .layout.flex .left-center-right {
          display: flex;
        }
        .layout.flex {
          /* 注意，上面 position 定位脱离了文档流，需要用 margin-top 将高度留出来 */
          margin-top: 140px;
        }
        .layout.flex .left {
          width: 300px;
          background: red;
        }
        .layout.flex .center {
          flex: 1;
          background: yellow;
        }
        .layout.flex .right {
          width: 300px;
          background: blue;
        }
      </style>
      <article class="left-center-right">
        <div class="left">left</div>
        <div class="center">
          <h2>flex方案</h2>
          这是中间部分
        </div>
        <div class="right">right</div></article>
    </section>
    <section class="layout table">
      <style media="screen">
        .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">
          <h2>表格布局</h2>
        </div>
        <div class="right"></div>
      </article>
    </section>
    <section class="layout grid">
      <style media="screen">
        .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">
          <h2>这是网格布局</h2>
        </div>
        <div class="right"></div>
      </article>
    </section>
  </body>
</html>

Back to posts