---恢复内容开始---
使用 float属性或position属性的缺点：就是每个元素都各自独独立 ;
列计数器和宽度:
有两个CSS属性控制是否实现多列布局和显示多少列： column-count and column-width。可以用 columns 来代替；
column-count:2与columns等效；column-20em与conlumns: 20em；两个也可以合在一起写 可以简写为columns: 2 20em;
列间隙:
列之间有缝隙。建议值为1em。该值可通过设置多列模块的 column-gap 属性来修改。
高度平衡:
CSS3多列规范需要列高平衡：即，浏览器自动设置最大列高，因此每列中的内容高度大致相同。Firefox浏览器是这样的。
然而，一些情况下，明确设置最大列高也是有用的，这样内容从第一列开始，尽可能多的生成列，甚至会溢出右边沿。因此，如果通过设置height 或 max-height 属性来限制列高，在生成新的一列之前每一列都会仅允许增加到这个高度。该模型对布局来说也更高效;
优雅降级
多列属性会被不支持多列模型的浏览器忽略。因此，为这些浏览器创建单列结构而为支持多列的浏览器创建多列结构相对来说比较简单。
注意不是所有的浏览器都支持不带前缀的属性名。为了在大多数现代浏览器中应用这种特性，每个属性必须写三次： 一次用 -moz 前缀，一次用 -webkit 前缀，一次不使用前缀
列如下一试就知：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
/*column-30em;*/
/*-moz-column-30em;*/
/*-webkit-column-30em;*/
/*column-gap:2em;*/
/*-moz-column-gap:2em;*/
/*-webkit-column-gap:2em;*/
/*column-column-count:2;*/
/*-moz-column-count:2;*/
/*-webkit-column-count:2;*/
columns:5 8em;
-moz-columns:5 8em;
-webkit-columns:5 8em;
}
</style>
</head>
<body>
<div >Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum</div>
</body>
</html>
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum