想要使用CSS将div元素的内容分成多列来显示，可以使用columns属性。columns属性一个简写属性，可以设置列数和列宽，用于设置分栏模块。下面本篇文章就来给大家介绍一下columns属性，希望对大家有所帮助。
columns 属性是一个简写属性，一次可以采用多个值；用于设置列宽和列数。
语法：
属性值：
● auto： 这会将列宽和列计数值设置为其浏览器默认值。
示例：
效果图：
注意：如果未指定column-width和column-count中的任何值，则浏览器默认将其值设置为auto。
● column-width和columns-count ：用于使用整数值指定列宽和列数。
效果图：
浏览器支持：
● Chrome 50.0, 4.0 -webkit-
● Edge 10.0
● Firefox 52.0, 9.0 -moz-
● Safari 9.0, 3.1 -webkit-
● Opera 37.0, 15.0 -webkit- 11.1
此处的注释为去掉换行符的影响.wrapper
{
width:
100%
/*
也可以固定宽度
*/
height:
200px
}
.wrapper
>
div
{
display:
inline-block
/*
如需支持ie8以下版本，用浮动来做
*/
width:
calc(100%
/
3)
/*
此处运用了一个css3的表达式，将div三等分，ie8及以上可以支持，当然也可以根据需要设置固定值
*/
width:
-webkit-calc(100%
/3)
width:
-moz-calc(100%
/
3)
height:
100%
}
以上经亲自测过，ie8+、chrome、firefox表现良好。
column-count :指定元素应该分为的列数
column-fill：指定css如何填充列
column-gap：指定列之间的差距
column-rule：对于设置所有column-rule-*属性的简写属性
column-rule-color：指定列之间的颜色规则
column-rule-style：指定列之间的样式规则
column-rule-width：指定列之间的宽度规则
column-span：指定元素应该跨越多少列
column-width：指定列的宽度
columns缩写属性设置列宽和列数
break-inside: avoid //防止断裂
