CSS多列布局

1.多列等高布局

这种布局即每一列的高度保持一致，高度与最高的一列相同。等高布局是为了维护边框线条的完整性，在有些地方则可能是为了维护背景的完整性，达到整体一致不缺失的效果。

最常用的方法为padding补偿法：

.container{
  overflow:hidden;
}

.item{
  float:left;
  width:100px;
  margin-right:10px;
  padding-bottom:10000px;
  margin-bottom:-10000px;
}
 

<div class="container">
  <div class="item">
    123
  </div>
  <div class="item">
    123<br/>
    456<br/>
    123
  </div>
  <div class="item">
    456
  </div>
</div>

这种方法的原理是设置子列的padding-bottom的值足够大，此时父容器也会被撑开，接下来再把子列的margin-bottom的值设成与padding-bottom相等的负值，子列的高度会被抵消，但内容高度却不会减少，较短的列会用padding-bottom来弥补内容高度，最后就是设置父容器over-flow:hidden;  将超出的部分隐藏，就实现了多列等高的效果。

优点：简单易操作，CSS实现，兼容性较好，适用于各版本浏览器。

缺点：当给子列设置border:3px red solid;  会出现以下问题：

由于超出父容器部分被隐藏，有部分边框将无法显示。

 

2.利用负边距

 .container{
    overflow: hidden;
  }

  .wrap{
    float: left;
    width:100%;
  }

  .left{
    float:left;
    width:120px;
    margin-left: -100%;
    background: red;
  }

  .right{
    float:left;
    width: 150px;
    margin-left: -150px;
    background: green;
  }

  .main{
    margin-left: 120px;
    margin-right: 150px;
    background: blue;
  }
 

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

这种方法的原理是：开始时.wrap的width:100%，单独占一整行，此时.left和.right都在第二行

然后设置.left的margin-left: -100%;  相当于向上平移了一行，而他原来的位置则变成了.right，设置.right的margin-left:-150px;  相当于来到了第一行的尾部

最后给.wrap中的.main设置margin-left: 120px;  margin-right: 150px;  就实现了多列布局的效果。

优点：CSS实现，控制比较容易。

缺点：当列数较多时会显得很麻烦。

 

3.CSS3多列布局

CSS3新增了多列布局特性，可以让浏览器确定何时结束一列和开始下一列，通过设置CSS属性即可实现。可以设置以下几个属性：

column-width: 每列宽度

column-count: 元素应该被分隔的列数。

column-gap: 列之间的间隔。

column-rule: 列之间的宽度、样式和颜色规则。

.container{
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
}


<div class="container">
  一个人的进步并不是自己说了算的，自我感觉良好的时候容易迷失自己，这时你需要别人的评价，别人的意见，才能让你更加清晰的认识自己。
人都是在错误中成长的，错误能让你更清晰的认识自己，知道自己的不足，这样能更好的对症下药，进而挑战自己，几近完美。
学习固然很重要，但是事后的思考更加重要，重另一个角度审视自己会有意想不到的收获。
</div>

优点：使用方便，控制简单

缺点：只适用于文本，并且从下图可以看出不支持IE9，为了兼容其他浏览器需要添加浏览器前缀。

4.flex布局

CSS3还提供了一个额外的布局系统。在这个新的框模型中，框的子代采用水平或垂直布局，而且可将未使用的空间分配给特定的子代，或者通过“弹性”分配给应展开的子代，在各子代间进行分配。这些框的嵌套（水平嵌套在垂直中，或垂直嵌套在水平中）可用于在两个维度中构建布局。

Flexbox 为 display 属性赋予了一个新的值box，还为我们提供了8个新的属性：

1. box-orient
2. box-pack
3. box-align
4. box-flex
5. box-flex-group
6. box-ordinal-group
7. box-direction
8. box-lines

优点：变化多，使用上更加灵活，功能强大

缺点：较复杂，兼容性也不是很好，IE9不兼容，为了兼容IE10和其他浏览器需要添加浏览器前缀。