1：使用浮動(dòng)

html：

<section class="layout float">
    <article class="left-center-right">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </article>
</section>

css：

.layout.float .left-center-right>div{
      min-height:100px;
   }
  .left-center-right .left{
      float:left;
      width:300px;
      background:red;
  }
  .left-center-right .right{
      float:right;
      width:300px;
      background:red;
  }
  .left-center-right .center{
      background:green;
  }

2：使用絕對(duì)定位

html：

<section class="layout absolute">
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article>
</section>

css：

.layout.absolute.left-center-right>div{
      min-height:100px;
      position:absolute;
   }
  .left-center-right .left{
      left:0;
      width:300px;
      background:red;
  }
  .left-center-right .right{
      right:0;
      width:300px;
      background:red;
  }
  .left-center-right .center{
      left:300px;
      right:300px;
      background:green;
  }

3：使用flexbox方法

html：

  <section class="layout flex">
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article>
  </section>

css：

.layout.flex. left-center-right>div{
      min-height:100px;
   }
.layout.flex .left-center-right{
      display:flex;
}
  .left-center-right .left{
      width:300px;
      background:red;
  }
  .left-center-right .right{
      width:300px;
      background:red;
  }
  .left-center-right .center{
      flex:1;
      background:green;
  }

4：使用table布局

html：

<section class="layout table">
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article>
  </section>

css：

.layout.table .left-center-right{
      height:100px;
      width:100%;
      display:table;
   }
.layout.table .left-center-right>div{
      display:table-cell;
}
.left-center-right .left{
      width:300px;
      background:red;
  }
  .left-center-right .right{
      width:300px;
      background:red;
  }
  .left-center-right .center{
      background:green;
  }

5：使用grid：

html：

<section class="gridLayout">
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article>
  </section>

css：

.gridLayout .left-center-right{
      display:grid;
      width:100%;
      grid-template-rows:100px;
      grid-template-columns:300px auto 300px;
   }
.left-center-right .left{
      background:red;
  }
  .left-center-right .right{
      background:red;
  }
  .left-center-right .center{
      background:green;
  }