Layout 常见布局

Two Components

By float

双栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在

• 使用 float 左浮左边栏 set float on the left component
• 右边模块使用 margin-left 撑出内容块做内容展示 set margin-left on the right one
• 为父级元素添加BFC，防止下方元素飞到上方内容 add BFC on the container

  <style>
      .box{
          overflow: hidden; 添加BFC
      }
      .left {
          float: left;
          width: 200px;
          background-color: gray;
          height: 400px;
      }
      .right {
          margin-left: 210px;
          background-color: lightgray;
          height: 200px;
      }
  </style>
  <div class="box">
      <div class="left">左边</div>
      <div class="right">右边</div>
  </div>

  By flex

  flex可以说是最好的方案了，代码少，使用简单,注意的是，flex容器的一个默认属性值:align-items: stretch;这个属性导致了列等高的效果。 为了让两个盒子高度自动，需要设置: align-items: flex-start;
  It is easier to use ‘flex’. While, there is a default property ‘align-items: stretch’, we will need set ‘flex-start’ to avoid stretch.

  <style>
      .box{
          display: flex;
      }
      .left {
          width: 100px;
      }
      .right {
          flex: 1;
      }
  </style>
  <div class="box">
      <div class="left">左边</div>
      <div class="right">右边</div>
  </div>

  Three Components

两边使用 float 或者 absolute，中间使用 margin。

For the sides, we use float/absolute and use margin to control middle element.

<style>
    .wrap {
        background: #eee;
        overflow: hidden; <!-- 生成BFC，计算高度时考虑浮动的元素 -->
        padding: 20px;
        height: 200px;
    }
    .left {
        width: 200px;
        height: 200px;
        float: left;
        background: coral;
    }
    .right {
        width: 120px;
        height: 200px;
        float: right;
        background: lightblue;
    }
    .middle {
        margin-left: 220px;
        height: 200px;
        background: lightpink;
        margin-right: 140px;
    }
</style>
<div class="wrap">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
    <div class="middle">中间</div>
</div>

Display: table 实现

<style>
  .container {
    height: 200px;
    line-height: 200px;
    text-align: center;
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .left,
  .right,
  .main {
    display: table-cell;
  }

  .left,
  .right {
    width: 100px;
    background: green;
  }

  .main {
    background: black;
    color: white;
    width: 100%;
  }
</style>

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="main">中间自适应</div>
  <div class="right">右边固定宽度</div>
</div>

Flex实现

<style type="text/css">
    .wrap {
        display: flex;
        justify-content: space-between;
    }

    .left,
    .right,
    .middle {
        height: 100px;
    }

    .left {
        width: 200px;
        background: coral;
    }

    .right {
        width: 120px;
        background: lightblue;
    }

    .middle {
        background: #555;
        width: 100%;
        margin: 0 20px;
    }
</style>
<div class="wrap">
    <div class="left">左侧</div>
    <div class="middle">中间</div>
    <div class="right">右侧</div>
</div>

Grid网格布局

<style>
    .wrap {
        display: grid;
        width: 100%;
        grid-template-columns: 300px auto 300px;
    }

    .left,
    .right,
    .middle {
        height: 100px;
    }

    .left {
        background: coral;
    }

    .right {
        width: 300px;
        background: lightblue;
    }

    .middle {
        background: #555;
    }
</style>
<div class="wrap">
    <div class="left">左侧</div>
    <div class="middle">中间</div>
    <div class="right">右侧</div>
</div>