CSS之三栏布局

CSS 三栏布局是最基础的布局方式，一般要求是两边固定宽度，中间自适应。这个布局有多种方法可以实现，下面介绍几种常见的布局方法。

浮动布局#

示例代码#

<style>
  .container div {
    height: 300px;
  }
  .left {
    float: left;
    width: 300px;
    background: red;
  }
  .right {
    float: right;
    width: 300px;
    background: green;
  }
  .main {
    background: yellow;
  }
</style>
<article class="container">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="main">这是浮动布局的中间部分</div>
</article>

分析#

这是最简单的浮动三栏布局，缺点很多，比如无法设置栏与栏之间的间隙，有时候需要清除浮动，最重要的 main 栏只能被放在最后面，加载最慢，在实际中在几乎很少会这样用的。一般是与 margin 属性相结合使用的，比如经典的双飞翼布局和圣杯布局。

兼容性：float 布局的兼容性非常好，适合大部分浏览器。

下面介绍两种特殊的浮动布局。双飞翼布局和圣杯布局都是把 main 栏放到最前面，然后利用负边距把其它的两栏放在两边。

双飞翼布局#

<style>
  .container {
    float: left;
    width: 100%;
  }
  .main,
  .left,
  .right {
    height: 300px;
  }
  .main {
    margin-left: 320px;
    margin-right: 320px;
    background-color: green;
  }
  .left {
    float: left;
    width: 300px;
    margin-left: -100%;
    background-color: red;
  }
  .right {
    float: right;
    width: 300px;
    margin-left: -300px;
    background-color: blue;
  }
</style>
<div class="container">
  <div class="main">这是双飞翼布局的中间部分</div>
</div>
<div class="left">left</div>
<div class="right">right</div>

圣杯布局#

<style>
  .container {
    margin-left: 320px;
    margin-right: 320px;
  }
  .container div {
    height: 300px;
  }
  .main {
    float: left;
    width: 100%;
    background-color: red;
  }
  .left {
    float: left;
    width: 300px;
    margin-left: -100%;
    position: relative;
    left: -320px;
    background-color: blue;
  }
  .right {
    float: left;
    width: 300px;
    margin-left: -300px;
    position: relative;
    right: -320px;
    background-color: green;
  }
</style>
<div class="container">
  <div class="main">这是圣杯布局的中间部分</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

绝对定位布局#

示例代码#

<style>
  .container div {
    height: 300px;
  }
  .left {
    position: absolute;
    left: 0;
    width: 300px;
    background: red;
  }
  .right {
    position: absolute;
    right: 0;
    width: 300px;
    background: green;
  }
  .main {
    position: absolute;
    left: 300px;
    right: 300px;
    background: yellow;
  }
</style>
<article class="container">
  <div class="left">left</div>
  <div class="main">这是绝对定位布局的中间部分</div>
  <div class="right">right</div>
</article>

分析#

绝对定位布局三栏的位置是可以任意调整的，不过如果浏览器缩小的话，位置会重叠。绝对定位一般也是和margin属性结合使用比较多点。

兼容性：绝对定位布局兼容性很好，适合大部分浏览器。

表格布局#

示例代码#

<style>
  .container {
    display: table;
    width: 100%;
    height: 300px;
  }
  .left {
    display: table-cell;
    width: 300px;
    background: red;
  }
  .main {
    display: table-cell;
    background: yellow;
  }
  .right {
    display: table-cell;
    width: 300px;
    background: green;
  }
</style>
<article class="container">
  <div class="left">left</div>
  <div class="main">这是表格布局的中间部分</div>
  <div class="right">right</div>
</article>

分析#

用 div 元素代替了以前使用<table><th><td>元素，效果是一样的，使用垂直居中效果很好。表格布局其实还有很多特性的，以后再研究。

兼容性：很好，适合 IE8 以上浏览器。

flex 布局#

示例代码#

<style>
  .container {
    display: flex;
    height: 300px;
  }
  .left {
    width: 300px;
    background: red;
  }
  .main {
    flex: 1;
    background: yellow;
  }
  .right {
    width: 300px;
    background: green;
  }
</style>
<article class="container">
  <div class="left">left</div>
  <div class="main">这是flex布局的中间部分</div>
  <div class="right">right</div>
</article>

分析#

flex 布局非常灵活，位置也可以任意定义（设置 order）。目前移动端用的比较多。

兼容性：flex 为 CSS3 新提出的布局方式，兼容性比较差，适合 IE11 以上浏览器。

网格布局#

示例代码#

<style>
  .container {
    display: grid;
    width: 100%;
    grid-template-rows: 300px;
    grid-template-columns: 300px auto 300px;
  }
  .left {
    background: red;
  }
  .main {
    background: yellow;
  }
  .right {
    background: green;
  }
</style>
<article class="container">
  <div class="left">left</div>
  <div class="main">这是网格布局的中间部分</div>
  <div class="right">right</div>
</article>

分析#

网格布局是一种全新的布局方法，它是二维布局，可以布局行和列，因此非常灵活和高效。

兼容性：比 flex 的兼容性还差，只适合现代浏览器。