实现CSS双栏自适应布局的5种方法

<style>
  .left-1,
  .right-1 {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .left-1 {
    float: left;
    width: 200px; /* 固定200px */
    background-color: green;
  }

  .right-1 {
    margin-left: 210px; /* 左边宽度再加10px空白 */
    background-color: black;
    color: white;
  }
</style>

<div>
  <div class="left-1">左边固定</div>
  <div class="right-1">右边自适应</div>
</div>

实例详解

1. 左边使用 float: left 向左浮动，并且设置了固定宽度。
2. 因为左边浮动，右边上移到左边的同一行，和左边重叠在一起。
3. 右边设置 margin-left: 210px 和左边间隔出10px。

优点

1. 结构简单直观。

缺点

无。

浏览器兼容性

所有主流浏览器都支持。

2. 左边使用 position: absolute 固定宽度，右边使用 margin-left 隔开自适应

<style>
  .left-2,
  .right-2 {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .left-2 {
    position: absolute; /* 固定200px */
    width: 200px;
    background-color: green;
  }

  .right-2 {
    margin-left: 210px; /* 左边宽度再加10px空白 */
    background-color: black;
    color: white;
  }
</style>

<div>
  <div class="left-2">左边固定</div>
  <div class="right-2">右边自适应</div>
</div>

实例详解

1. 左边使用绝对定位，固定在左侧。
2. 右边上移到左边的同一行，和左边重叠在一起。
3. 右边设置 margin-left: 210px 和左边间隔出10px。

优点

1. 左边是绝对定位的，所以左右两边可以互换，让右边内容优先加载 (父节点设置 position: relative， 左边增加 top: 0) 。

缺点

1. 使用了绝对定位，左边内容脱离了文档流。如果右边内容高度低于左边，则出现超出 父节点的情况，需通过JS解决。

浏览器兼容性

所有主流浏览器都支持。

3. 左边使用负 margin，右边使用 float: left 给左边留出空间展示

<style>
  .main-wrapper,
  .sidebar {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .main-wrapper {
    float: left;
    width: 100%;
  }

  .main {
    margin-left: 210px;
    background-color: black;
    color: white;
  }

  .sidebar {
    float: left;
    width: 200px;
    margin-left: -100%;
    background-color: green;
  }
</style>

<div class="main-wrapper">
  <div class="main">右边自适应</div>
</div>
<div class="sidebar">左边固定宽度</div>

实例详解

1. .main 主体内容使用了双层标签，外层是浮动的，以便左右能在同一行展示。
2. .sidebar 通过使用负 margin-left: -100%，相当于中间的宽度，所以向上偏移到左侧。

优点

1. 右边的主体内容排在前面，优先加载。

缺点

1. 增加了 .main-wrapper 一层，结构变复杂。
2. 使用负 margin ，调试也相对麻烦。

浏览器兼容性

所有主流浏览器都支持。

4. 使用 display: table 实现

<table> 标签用于展示行列数据，不适合用于布局。但是可以使用 display: table 来实现布局的效果。

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

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

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

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

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="main">主体内容自适应</div>
</div>

<style>
  .container {
    display: -webkit-box;
    display: -ms-flexbox; /* IE10 */
    display: flex;
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .left {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 200px;
    flex: 0 0 200px; /* 不缩小，不扩大，基础宽度200px */
    background: green;
  }

  .main {
    background: black;
    color: white;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto; /* 按需缩小，扩大，基础宽度自适应 */
  }
</style>

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