在前端日常佈局中，會經常遇到左側寬度固定，右側自適應或者左右兩邊固定，中間部分自適應的實用場景。本文例子中將列舉出兩種常用的兩欄佈局，左側固定右側自適應的常用方法以及程式碼和五種左右固定中間自適應的常用方法以及程式碼

具體實現效果展示如下：

1.二欄佈局-flex彈性佈局

<!-- flex彈性佈局 -->
  <div class="title">flex彈性佈局：</div>
  <div class="box1">
    <div class="left1">左邊</div>
    <div class="right1">右邊</div>
  </div>
 

// flex彈性佈局
.box1 {
  display: flex;
  height: 100px;
  background: rgb(241, 210, 210);
  padding: 10px;

  .left1 {
    width: 100px;
    height: 100%;
    background: yellow;
    text-align: center;
    line-height: 100px;
  }

  .right1 {
    flex: 1;
    background: grey;
    text-align: center;
    line-height: 100px;
  }
}
 

2.二欄佈局-左float右margin-left

<!-- 左float右margin-left -->
  <div class="title">雙欄佈局（左float右margin-left）：</div>
  <div class="box">
    <div class="left">左邊</div>
    <div class="right">右邊</div>
  </div>

// 雙欄佈局（左float右margin-left）
.box {
  overflow: hidden;
  background: rgb(241, 210, 210);
  padding: 10px;

  .left {
    float: left;
    width: 200px;
    background-color: gray;
    height: 100px;
    text-align: center;
    line-height: 100px;
  }

  .right {
    margin-left: 210px;
    background-color: lightgray;
    height: 100px;
    text-align: center;
    line-height: 100px;
  }
}
 

3.三欄佈局-兩邊使用 float，中間使用 margin

<!-- 三欄佈局-兩邊使用 float，中間使用 margin -->
  <div class="title">三欄佈局-兩邊使用 float，中間使用 margin：</div>
  <div class="box-float-margin">
    <div class="left">三欄左側</div>
    <div class="right">三欄右側</div>
    <div class="center">三欄中間</div>
  </div>

// 三欄佈局-兩邊使用 float，中間使用 margin
.box-float-margin {
  background: rgb(241, 210, 210);
  overflow: hidden;
  padding: 10px;
  height: 100px;

  .left {
    width: 200px;
    height: 100px;
    float: left;
    background: rgb(80, 255, 182);
    text-align: center;
    line-height: 100px;
  }

  .right {
    width: 120px;
    height: 100px;
    float: right;
    background: rgb(173, 130, 130);
    text-align: center;
    line-height: 100px;
  }

  .center {
    margin-left: 220px;
    height: 100px;
    background: rgb(255, 223, 182);
    margin-right: 140px;
    text-align: center;
    line-height: 100px;
  }
}

4.三欄佈局-兩邊使用 absolute，中間使用 margin

  <!-- 三欄佈局-兩邊使用 absolute，中間使用 margin  -->
  <div class="title">三欄佈局-兩邊使用 absolute，中間使用 margin:</div>
  <div class="box-absolute">
    <div class="left">左邊固定寬度</div>
    <div class="right">右邊固定寬度</div>
    <div class="center">中間自適應</div>
  </div>

// 三欄佈局-兩邊使用 absolute，中間使用 margin
.box-absolute {
  position: relative;
  background: rgb(241, 210, 210);
  padding: 10px;

  div {
    height: 100px;
    text-align: center;
    line-height: 100px;
  }

  .left {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
    background: rgb(128, 119, 119);
  }

  .right {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 100px;
    background: rgb(128, 168, 228);
  }

  .center {
    margin: 0 110px;
    background: rgb(126, 102, 143);
    color: rgb(255, 255, 255);
  }
}

5.三欄佈局-flex彈性佈局

  <!-- 三欄佈局-flex彈性佈局 -->
  <div class="title">三欄佈局-flex彈性佈局:</div>
  <div class="box-flex-three">
    <div class="left">左邊固定寬度</div>
    <div class="center">中間自適應</div>
    <div class="right">右邊固定寬度</div>
  </div>

// 三欄佈局-flex彈性佈局
.box-flex-three {
  display: flex;
  justify-content: space-between;
  background: rgb(241, 210, 210);
  padding: 10px;

  div {
    text-align: center;
    line-height: 100px;
    height: 100px;
  }

  .left {
    width: 500px;
    background: rgb(165, 163, 162);
  }

  .right {
    width: 300px;
    background: rgb(209, 123, 226);
  }

  .center {
    background: rgb(7, 245, 7);
    width: 100%;
    margin: 0 10px;
  }
}

6.三欄佈局-grid佈局

<!-- 三欄佈局-grid佈局 -->
  <div class="title">三欄佈局-grid佈局:</div>
  <div class="box-grid">
    <div class="left">左側</div>
    <div class="center">中間</div>
    <div class="right">右側</div>
  </div>

// 三欄佈局-grid佈局
.box-grid {
  display: grid;
  width: 100%;
  grid-template-columns: 300px auto 250px;

  div {
    text-align: center;
    line-height: 100px;
    height: 100px;
  }

  .left {
    background: rgb(80, 255, 95);
  }

  .right {
    width: 250px;
    background: rgb(23, 127, 161);
  }

  .center {
    background: rgb(54, 131, 73);
  }
}

7.三欄佈局-display: table

<!-- 三欄佈局-display: table -->
  <div class="title">三欄佈局-display: table:</div>
  <div class="box-table">
    <div class="left">左邊固定寬度</div>
    <div class="center">中間自適應</div>
    <div class="right">右邊固定寬度</div>
  </div>

// display: table
.box-table {
  height: 100px;
  line-height: 100px;
  text-align: center;
  display: table;
  table-layout: fixed;
  width: 100%;

  .left,
  .right {
    width: 300px;
    background: rgb(228, 20, 183);
    display: table-cell;
  }

  .center {
    background: rgb(18, 240, 118);
    color: white;
    width: 100%;
    display: table-cell;
  }
}