多栏布局

1、flex布局（实现了两栏布局）

<style type="text/css">  

.box{  
  display: flex;  //flex布局
}  
.left{  
  width: 300px;  //定义左边的宽度
  height: 200px;  
  background-color: blue;  
}  
.right{  
  flex: 1;  //右边自适应？还不是很懂，我猜测是根据视口自动调整宽度
  height: 200px;  
  background-color: red;  
}  
</style>
<div class="box">    
         <div class="left">left</div>  
         <div class="right">right</div>   
</div>  

2、css3实现多栏布局

css3有一些关于布局的属性：column-width、column-count、column-rule、column-gap、columns.

column-width:设置每列的宽度，css解析器会自动根据页面的视口宽度算出在设定列宽的情况下。每行应该显示多少列

column-count:设置每行显示多少列，同样css解析器会自动计算每行的宽度，所以此属性和上边的属性只写其中一个即可

column-rule:定义每列中间的样式，eg:column-rule:1px solid #ff0000;

column-gap:设置列间距，但实际显示的列间距可能和设置的不同，因为以解析器计算出来的值为准

注意：column属性有些浏览器不能很好地支持，因此在具体使用的时候，记得在属性之前加上浏览器内核前缀