CSS實現兩欄布局

兩欄布局：左側固定寬度，右側自適應

先看一下頁面布局：

  <div class="wrap">
    <div class="left">
      左側固定內容
    </div>
    <div class="right">
      右側內容自適應
    </div>
  </div>

1.float

<style>
    /* 清除瀏覽器默認邊距 */
    * {
      margin: 0;
      padding: 0;
    }
    .wrap {
      overflow: hidden;
      border: 1px solid red;
    }
    /* 脫離文檔流 */
    .left {
      float: left;
      width: 200px;
      height: 200px;
      background: purple;
    }
    .right {
      margin-left: 200px;
      background: skyblue;
      height: 200px;
    }
  </style>

2.使用絕對定位實現—absolute

 

  <style>
    /* 清除瀏覽器默認邊距 */
    * {
      margin: 0;
      padding: 0;
    }
    .wrap {
      overflow: hidden;
      position: relative;
    }
    /* 脫離文檔流 */
    .left {
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      height: 200px;
      background: purple;
    }
    .right {
      margin-left: 200px;
      background: skyblue;
      height: 200px;
    }
  </style>

 

3.使用表格布局—table

  <style>
    /* 清除瀏覽器默認邊距 */
    * {
      margin: 0;
      padding: 0;
    }
    /* 表格布局 */
    .wrap {
      display: table;
      width: 100%;
    }
    .left {
      display: table-cell;
      width: 200px;
      height: 200px;
      background: purple;
    }
    .right {
      display: table-cell;
      background: skyblue;
      height: 200px;
    }
  </style>

4.使用calc函數

 

  <style>
    /* 清除瀏覽器默認邊距 */
    * {
      margin: 0;
      padding: 0;
    }
    /* 雙float */
    .wrap {
      overflow: hidden;
    }
    .left {
      float: left;
      width: 200px;
      height: 200px;
      background: purple;
    }
    .right {
      float: left;
      background: skyblue;
      height: 200px;
      width: calc(100% - 200px);
    }
  </style>

 

5.使用inline-block和calc()函數

 

  <style>
    /* 清除瀏覽器默認邊距 */
    * {
      margin: 0;
      padding: 0;
    }
    /* 雙float */
    .wrap {
      overflow: hidden;
      width: 100%;
      font-size: 0;
    }
    .left {
      display: inline-block;
      width: 200px;
      height: 200px;
      background: purple;
      font-size: 20px;
    }
    .right {
      display: inline-block;
      background: skyblue;
      height: 200px;
      width: calc(100% - 200px);
      font-size: 20px;
    }
  </style>

6.使用彈性布局—flex

 

 <style>
    /* 清除瀏覽器默認邊距 */
    * {
      margin: 0;
      padding: 0;
    }
    .wrap {
      display: flex;
    }
    .left {
      height: 200px;
      background: purple;
      width:100px;
    }
    .right {
      background: skyblue;
      height: 200px;
      flex: 1;
    }
  </style>