CSS --- 两栏、三栏布局-CSDN博客

　　本文主要总结了两栏布局（两列自适应、一列固定一列自适应）、三栏布局（两边固定中间自适应）的一些方法，以便遗忘时能方便查询。

一、两栏布局

1、两列自适应

　　两列自适应是特别简单的布局方式，其要点在于把列宽用百分百来表示，然后可以使用 float 或 display：inline-block 等方法来让两列处于同一行。不多说，直接上代码：

　　方法一：使用 float

<style>
  .outer{
    background:green;
    padding-bottom:20px;
  }
  .left{
    float:left;
    width:20%;
    height:100px;
    background:red;
  }
  .right{
    float:right;
    width:77%;　　　　　　//使两列之间有一个间距
    height:100px;
    background:pink;
  }
</style>
 
<body>
  <div class="outer">
    <div class="left">列一</div>
    <div class="right">列二</div>
  </div>

　　优点：简单

　　缺点：两列都脱离了文档流，两列后面的内容或父盒子无法被撑起（上图中的绿色是父盒子），故需要清除浮动。

　　方法二：使用 display：inline-block

<style>
  .outer{
    background:green;
    padding-bottom:20px;
  }
  .left{
    display:inline-block;
    width:20%;
    height:100px;
    background:red;
  }
  .right{
    display:inline-block;
    width:60%;          //设置小方便观察
    height:120px;
    background:pink;
  }
</style>

<body>
  <div class="outer">
    <div class="left">列一</div>　　　　//这儿换行了，"列一" 和 "列二" 之间因换行形成了一个间隙
    <div class="right">列二</div>
  </div>
</body>

　　优点：不用考虑盒子脱离文档流的问题，父盒子总能被高的盒子撑起

　　缺点：需要考虑盒子的间距。

　　　1：设置为 inline-block 的盒子因为上面注释处的换行而在浏览器渲染时形成了一个间隙（上图蓝色箭头处），故需要解决这个间隙问题。

　　　2：如果要 “列一” 和 “列二” 之间有一个间距，则需要考虑 “列二” 宽度和间距大小的关系，可以与 margin 相结合来解决这个问题。

　　其他方法：

　　position：absolute ------ 问题与设置 float 类似。

2、一列固定一列自适应

　　这个布局方式也很简单，其实与上面的布局方式是相通的，方法特别多，但都是灵活的运用这几个属性。所以这儿示例以 margin、BFC来实现的布局方式。

　　方法一：margin

<style>
  .outer{
    margin-left:220px;    //可以考虑margin-right：-220px；但需要和float联合使用
  }
  .left{
    float:left;
    width:200px;
    height:100px;
    background:red;
  }
  .right{
    height:120px;
    background:pink;
  }
</style>

<body>
  <div class="left">列一</div>
  <div class="outer">
    <div class="right">列二</div>
  </div>
</body>

　　缺点：无论是设置margin-left，还是设置margin-right，“列一” 和 “列二” 至少有一个是脱离文档流了的。

　　方法二：BFC

<style>
  .left{
    float:left;
    margin-right:20px;
    width:200px;
    height:100px;
    background:red;
  }
  .right{
    overflow:hidden;        //触发BFC
    height:120px;
    background:pink;
  }
</style>

<body>
  <div class="left">列一</div>
  <div class="right">列二</div>
</body>

　　BFC清除浮动的原理可以点这儿。简单的说，就是触发 BFC 后盒子不会与 float 区域重叠，这个方法简单好用，是我目前比较喜欢的方法。

二、三栏布局

1、两边固定中间自适应

　　方法一：margin

<style>
  .outer{
    width:100%;
    float:left;
  }
  .center{
    height:100px;
    margin:0 60px;
    background:pink;
  }
  .left,
  .right{
    float:left;
    width:50px;
    height:100px;
    background:red;
  }
  .left{
    margin-left: -100%;
  }
  .right{
    margin-left: -50px;
  }
</style>

<body>
  <div class="outer">
    <div class="center">列二</div>
  </div>
  <div class="left">列一</div>
  <div class="right">列三</div>
</body>

　　缺点：方法比较麻烦，需要嵌套额外的盒子，需要清除浮动

　　要点：注意三者在 HTML 中的顺序。

　　方法二：position

<style>
  body{
    margin:0;
  }
  .center{
    height:100px;
    margin:0 60px;
    background:pink;
  }
  .left,
  .right{
    position:absolute;
    top:0;
    width:50px;
    height:100px;
    background:red;
  }
  .left{
    left:0;
  }
  .right{
    right:0;
  }
</style>

<body>
  <div class="left">列一</div>
  <div class="center">列二</div>
  <div class="right">列三</div>
</body>

　　思路：中间盒子的 margin 配合两边盒子的绝对定位。

　　方法三：BFC

<style>
  .center{
    overflow:hidden;
    height:120px;
    background:pink;
  }
  .left,
  .right{
    width:50px;
    height:100px;
    background:red;
    margin:0 10px;
  }
  .left{
    float:left;
  }
  .right{
    float:right;
  }
</style>

<body>
  <div class="left">列一</div>
  <div class="right">列三</div>
  <div class="center">列二</div>
</body>