【Effective Web】常见的css布局方式--三栏布局

常见的css居中方式–三栏布局

第一种实现：table布局（不推荐）

缺点：在table加载前，整个table都是空白的，且修改布局排版都十分困难

    <table class="container">
      <td class="left"></td>
      <td class="middle"></td>
      <td class="right"></td>
    </table>
<style>
  .container {
    width: 500px;
    height: 100px;
    .left {
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .middle {
      height: 100px;
      background-color: green;
    }
    .right {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  }
</style>

第二种实现：float

优点：实现简单，支持性好
缺点：由于float使得其他非float的元素围绕元素排列，要计算相应的margin

如果按正常排列，效果会是这样，middle块会尽可能占空间，导致right元素被挤压到下一行

需要把right块提前，同时把middle块加上margin: 0 110px (左右100px + 10px)

    <div class="container">
      <div class="left" style="float: left">left</div>
      <div class="right" style="float: right">right</div>
      <div class="middle" style="margin: 0 110px">middle</div>
    </div>

第三种实现：table-cell

由于table有自适应的特点，可以把需要自适应的middle的display设置为table-cell。如果要根据窗口自适应，加上一个很大的width，这里设置为2000px

    <div class="container">
      <div class="left" style="float: left">left</div>
      <div class="right" style="float: right">right</div>
      <div class="middle" style="display: table-cell; width: 2000px;">
        middle
      </div>
    </div>

第四种实现：flex（推荐）

    <div class="container" style="display: flex">
      <div class="left">left</div>
      <div class="middle" style="flex-grow: 1">middle</div>
      <div class="right">right</div>
    </div>

第五种实现：grid

与flex布局类似，不过可以做二维的布局

    <div class="container" style="display: grid; grid-template-columns: 100px auto 100px">
      <div class="left">left</div>
      <div class="middle">middle</div>
      <div class="right">right</div>
    </div>