如何使用CSS3 column-count 属性

html-css017

如何使用CSS3 column-count 属性,第1张

1. column-count: 需要分割的列数

<div>

记得早先少年时,大家诚诚恳恳,说一句是一句;清早上火车站,长街黑暗无行人,卖豆浆的小店冒着热气;从前的日色变得慢,车、马、邮件都慢,一生只够爱一个人;从前的锁也好看,钥匙精美有样子,你锁了人家就懂了。

</div>

div {

-moz-column-count: 3

column-count: 3

}

CSS可以实现CountUp.js

无依赖的、轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据。尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 startVal 和 endVal 参数判断的。

countUp.js是一个轻量经的JavaScript类,没有任何第三方库。可用于以一种有趣的动画展示数字变化。

想要使用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