CSS二列&三列布局

本篇文章主要介绍本人最近在CSS学习中总结出的常用的二列&三列布局的几种方法

二列&三列布局：

image.png

二列布局的特征通常是侧栏固定宽度，主栏自适应宽度
三列布局的特征通常是两边侧栏固定宽度，主栏自适应宽度
实现方式有以下几种：

a. 浮动布局
原理：首先分别给两边侧栏左右浮动，然后中间主栏设置左右margin给两边侧栏留出空间，主栏自适应宽度
DOM文档：

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>

CSS文档:

.left{
 float: left;
 width: 100px;
 height: 100px;
 background-color: blue;
}
.right{
 float: right;
 width: 200px;
 height: 100px;
 background-color: green;
}
.main{
 height: 100px;
 background-color: red;
 margin-left: 120px;
 margin-right: 220px;
}

说明：
*如果是二列布局，则去掉一边侧栏，主栏取消那一边的margin设置。
*注意DOM顺序，要先写两边侧栏，如果先写主栏的话会将侧栏挤到下一列。
*这种布局的缺点是页面会首先渲染侧栏再渲染主栏。

b. 绝对定位布局
原理：通过绝对定位将两边侧栏固定，同样中间主栏设置margin给侧栏腾空间，中间主栏自适应。
DOM文档：

<div class="container">
  <div class="main"></div>
  <div class="right"></div>
  <div class="left"></div>
</div>

CSS文档：

.container{
  position: relative;
}
.left{
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 0;
  left: 0;
}
.right{
  width: 200px;
  height: 100px;
  background-color: green;
  position: absolute;
  top: 0;
  right: 0;
}
.main{
  height: 100px;
  background-color: red;
  margin-left: 120px;
  margin-right: 220px;
}

说明：
*如果是二列布局，则去掉一边侧栏，主栏取消那一边的margin设置。
*浏览器窗口小到一定程度时，主栏与侧栏会发生重叠。

c. 圣杯布局
原理：
首先给主栏和侧栏都加上左浮动，主栏宽度设置100%，此时左右侧栏均被挤下去；
然后给左侧栏一个margin-left:-100%，左侧栏会从主栏的下面拉到与主栏对齐的左边，给右侧栏一个margin-left:自身宽度，右侧栏会从主栏的下面拉到与主栏对齐的右边；
此时左右侧栏会挡住主栏的左右两边部分，所以在外层设置左右padding减小主栏宽度，给两边侧栏腾出空间，但是左右侧栏会跟着缩小的主栏一起向中间靠拢。此时使用相对布局，调整两个侧栏到相应的位置。
DOM文档：

<div class="container">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>  
</div>

CSS文档：

.main{
  background-color: red;
  float: left;
  width: 100%;
  height: 100px;
}
.left{
  width: 100px;
  height: 100px;
  background-color: blue;
  float: left;
  margin-left: -100%;
  position: relative;
  left: -100px
}
.right{
  width: 200px;
  height: 100px;
  background-color: green;
  float: left;
  margin-left: -200px;
  position: relative;
  right: -200px
}
.container{
  padding: 0 200px 0 100px;
}

说明：
*如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的padding-right值，其他操作相同。反之亦然。
*书写顺序不能更改
*当主栏宽度小于侧栏宽度时布局会乱，可以设置主栏的min-width或者使用双飞翼布局。

d. 双飞翼布局
原理：与圣杯布局相似，都利用了浮动和负边距，但是在main外面加了一层div，由于侧栏的负边距是相对这个外层div的，所以给main设置左右margin是不会影响左右侧栏，也就省去定位的步骤了。
DOM文档：

<div class="container">
  <div class="wrape">
      <div class="main"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>  
</div>

CSS文档：

.wrape{
  float: left;
  width: 100%;
}
.main{
  margin: 0 200px 0 100px;
  background-color: red;
  height: 100px;
}
.left{
  width: 100px;
  height: 100px;
  background-color: blue;
  float: left;
  margin-left: -100%;
  /* position: relative;
  left: -100px */
}
.right{
  width: 200px;
  height: 100px;
  background-color: green;
  float: left;
  margin-left: -200px;
  /* position: relative;
  right: -200px */
}

说明：
*如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置main-wrap的margin-right值，其他操作相同。反之亦然。
*解决了圣杯布局main的最小宽度不能小于左侧栏的缺点.

e. flex布局
DOM文档：

<div class="container">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>  
</div>

CSS文档：

.container{
  display: flex;
}
.main {
            flex: 1;
        height: 300px;
        background-color: red;
    }
    .left {
        order: -1;
        margin-right: 20px;
        height: 300px;
        background-color: blue;
    }
    .right {
            margin-left: 20px;
        height: 300px;
        background-color: green;
    }

说明：
*如果要实现二列的话，直接去掉单边侧栏即可。
*传统布局步骤复杂繁琐，而flex布局的flex容器利用实际可用空间动态地调整子元素宽高比和顺序，简单实用，但需要考虑浏览器的兼容性。

CSS二列&三列布局