水平布局解决方案

Time Flying

标签

Edit in GitHub

场景

场景: 假设高度已知, 请写出三栏布局, 其中左、右栏宽度各为 300 px, 中间自适应。本文针对这种场景罗列出以下几种方案。

float 布局

<body>
  <style>
    .left {
      float: left;
      background: red;
      width: 300px;
    }

    .middle {
      background: purple;
    }

    .right {
      float: right;
      background: green;
      width: 300px;
    }
  </style>
  <div class="left">float layout</div>
  <div class="right">float layout</div>
  <div class="middle">float layout</div>
</body>

float 布局要注意 class="middle" 这行书写的位置

position 布局

<body>
  <style>
    .left {
      background: red;
      position: absolute;
      left: 0;
      width: 300px;
    }

    .middle {
      position: absolute;
      left: 300px;
      right: 300px;
      background: purple;
    }

    .right {
      background: green;
      position: absolute;
      right: 0;
      width: 300px;
    }
  </style>
  <div class="left">position layout</div>
  <div class="middle">position layout</div>
  <div class="right">position layout</div>
</body>

flex 布局

<style>
  .flexbox {
    display: flex;
  }

  .left {
    background: red;
    width: 300px;
  }

  .middle {
    flex: 1;
    background: purple;
  }

  .right {
    background: green;
    width: 300px;
  }
</style>
<section class="flexbox">
  <div class="left">flex layout</div>
  <div class="middle">flex layout</div>
  <div class="right">flex layout</div>
</section>

flex 布局是兼容性较好的布局

grid 布局

<body>
  <style>
    .gridbox {
      display: grid;
      grid-template-columns: 300px auto 300px;
    }

    .left {
      background: red;
    }

    .middle {
      background: purple;
    }

    .right {
      background: green;
    }
  </style>
  <section class="gridbox">
    <div class="left">grid layout</div>
    <div class="middle">grid layout</div>
    <div class="right">grid layout</div>
  </section>
</body>

使用 grid 目前记住 columns-template-rows 和 columns-template-columns

table 布局

<body>
  <style>
    .tablebox {
      display: table;
      width: 100%;
    }

    .left {
      display: table-cell;
      background: red;
      width: 300px;
    }

    .middle {
      display: table-cell;
      background: purple;
    }

    .right {
      display: table-cell;
      background: green;
      width: 300px;
    }
  </style>
  <section class="tablebox">
    <div class="left">table layout</div>
    <div class="middle">table layout</div>
    <div class="right">table layout</div>
  </section>
</body>

table 布局也是和 flex 布局一样兼容性较高的方案

其它解决方案

针对两边宽度固定, 中间宽度自适应还有以下两种方案:

圣杯布局

核心思想: 将内容两边宽度提前空出来, 然后将块级元素进行移动填补。

<body>
  <style>
    .bd {
      padding: 0 200px 0 200px;
    }

    .main {
      float: left;
      width: 100%;
      height: 200px;
      background-color: #ddd;
    }
    .left {
      float: left;
      width: 200px;
      height: 200px;
      background-color: #da4242;
      /* 产生布局效果的属性 */
      margin-left: -100%;
      position: relative;
      left: -200px;
    }
    .right {
      float: left;
      width: 200px;
      height: 200px;
      background-color: #4ddef1;
      /* 产生布局效果的属性 */
      margin-left: -200px;
      position: relative;
      left: 200px;
    }
  </style>
  <div class="bd">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>

双飞翼布局

核心思想: 将内容宽度占满父容器, 然后将块级元素进行移动覆盖。

<body>
  <style>
    .main {
      float: left;
      width: 100%;
      height: 200px;
      background-color: #ddd;
    }

    .left {
      float: left;
      width: 200px;
      height: 200px;
      background-color: #da4242;
      /* 产生布局效果的属性 */
      margin-left: -100%;
    }

    .right {
      float: left;
      width: 200px;
      height: 200px;
      background-color: #4ddef1;
      /* 产生布局效果的属性 */
      margin-left: -200px;
    }
  </style>
  <div class="main"></div>
  <div class="left">left</div>
  <div class="right">right</div>
</body>