1、分隔列
把一段文本拆分成几列
column-count:规定元素被分隔的列数
2、列间隔
设置列与列之间的距离
column-gap:间隔;
3、列规则
可以在列与列之间设置一条间隔线，列规则可以设置间隔线的样式、颜色、粗细
column-rule:大小 样式 颜色;
column-rule-width:
column-rule-style:
column-rule-color:
<!DOCTYPE html>
<html>
<head>
<title> 多列 </title>
<meta charset="utf-8" />
<style>
div.content{
width:450px;
border:1px solid #e4393c;
/*将当前内容分成3列*/
-webkit-column-count:3;
-webkit-column-gap:45px;
-webkit-column-rule:1px solid #e4393c;
}
</style>
</head>
<body>
<div class="content">
中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国
</div>
</body>
</html>
1、IE10 以及 Opera 浏览器支持多列属性
2、FireFox 需使用前缀 -moz-
-moz-column-count:
-moz-column-gap:
-moz-column-rule:
3、Chrome 和 Safari
-webkit-column-count:
-webkit-column-gap:
-webkit-column-rule: