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

双栏布局是常见的布局方式。

本教程为大家介绍如何使用 CSS 实现双栏布局。

目录

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

<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>

尝试一下 »

实例详解

  1. 外层通过 display: table 设置为表格，设置 table-layout: fixed 表示列宽自身宽度决定，而不是自动计算。
  2. 内层的通过 display: table-cell 设置为表格单元。
  3. 左边设置固定宽度，主体内容设置 width: 100% 填充剩下的宽度。

优点

  1. 结构简单直观。
  2. table作为一个整体结构兼容性好，相比多个div浮动组合更加稳定。

缺点

  1. 内层元素展示为 table-cell, margin会失效，只能在 .container 设置 border-spacing 为所有元素设置间隔，或内部增加一层来设置 margin。

浏览器兼容性

所有主流浏览器都支持。

5. 使用 display: flex 实现

使用 flex 布局可以非常简单的实现双列，多列的效果，唯一要考虑的就是兼容性问题。

<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>

尝试一下 »

实例详解

  1. 外层容器 .container 通过 display: flex 设置为 flex 布局。
  2. 左边设置 flex: 0 0 200px 表示元素不缩小，不扩大，初始宽度为200px，即固定为200px。
  3. 右边设置 flex: 0 0 auto 表示元素按需缩小，扩大，基础宽度自适应，即宽度为总宽度减去200px，实现自适应。

优点

  1. 结构简单直观。
  2. 可以结合 flex 的其他功能实现更多效果，例如使用 order 属性调整显示顺序，让主体内容优先加载，但展示在中间。

缺点

  1. 需IE10及以上才支持。

浏览器兼容性

IE / Edge Chrome Firefox Safari Opera
11
10 -ms-		 20
4 -webkit-		 27
2 -moz-		 6
3.1 -webkit-		 12.1