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>