文章导航

CSS3 column-count

2018-3-31 14:02| 发布者: admin| 查看: 1005| 评论: 0|来自: 蚂蚁部落

column-count属性用来规定列的数目。

更多column内容参阅CSS3 columns一章节。

语法结构:

[CSS] 纯文本查看 复制代码
column-count: auto || num

参数解析:

(1).auto:默认值,列的数目根据其他相关属性确定。

(2).num:数值,用来规定列的数目。

浏览器支持:

(1).IE10+浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).opera浏览器支持此属性。

(6).Safari浏览器支持此属性。

特别说明:

(1).火狐浏览器需要加 -moz-前缀。

(2).谷歌和Safari浏览器需要添加-webkit-前缀。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.columns {
  border: 1px solid green;
  width: 600px;
  margin: 20px auto;
 
  -moz-column-count:auto;
  -webkit-column-count:auto;
  column-count:auto;
}
</style>
</head>
<body>
<div class="columns">
互联网的出现,极大的促进了信息的交流,随着步伐的前进,网站的交互需求越来越多,但是受限于当时的软硬件条件,
特别是网络环境的限制,非常简单的表单验证都要花费大量的时间在服务器与客户端之间进行传输,
后来改名为JavaScript。随着JavaScript在互联网上的成功运用,微软也随之开发了自己的"JavaScript"名叫JScript,
于是在互联网上就出现多种标准的"JavaScript"脚本语言,如果任其发展下去,那么将会严重影响互联网发展,
于是标准化迫在眉睫。最后JavaScript被提交给提交给欧洲计算机制造商协会(ECMA),
并最终推出了ECMA-262标准,定义了名为ECMAScript的脚本语言,从此以后浏览器都将ECMAScript作为js的基础。
</div>
</body>
</html>

上面的代码设置column-count值为auto,如果没有设置其他的相关属性,那么就会呈现一列显示。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.columns {
  border: 1px solid green;
  width: 600px;
  margin: 20px auto;
 
  -moz-column-count:4;
  -webkit-column-count:4;
  column-count:4;
}
</style>
</head>
<body>
<div class="columns">
互联网的出现,极大的促进了信息的交流,随着步伐的前进,网站的交互需求越来越多,但是受限于当时的软硬件条件,
特别是网络环境的限制,非常简单的表单验证都要花费大量的时间在服务器与客户端之间进行传输,
后来改名为JavaScript。随着JavaScript在互联网上的成功运用,微软也随之开发了自己的"JavaScript"名叫JScript,
于是在互联网上就出现多种标准的"JavaScript"脚本语言,如果任其发展下去,那么将会严重影响互联网发展,
于是标准化迫在眉睫。最后JavaScript被提交给提交给欧洲计算机制造商协会(ECMA),
并最终推出了ECMA-262标准,定义了名为ECMAScript的脚本语言,从此以后浏览器都将ECMAScript作为js的基础。
</div>
</body>
</html>

上面的代码设置呈现四列显示。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.columns {
  border: 1px solid green;
  width: 600px;
  margin: 20px auto;
 
  -webkit-column-width:150px;
  -moz-column-width: 150px;
  column-width: 150px;
 
  -moz-column-count:auto;
  -webkit-column-count:auto;
  column-count:auto;
}
</style>
</head>
<body>
<div class="columns">
互联网的出现,极大的促进了信息的交流,随着步伐的前进,网站的交互需求越来越多,但是受限于当时的软硬件条件,
特别是网络环境的限制,非常简单的表单验证都要花费大量的时间在服务器与客户端之间进行传输,
后来改名为JavaScript。随着JavaScript在互联网上的成功运用,微软也随之开发了自己的"JavaScript"名叫JScript,
于是在互联网上就出现多种标准的"JavaScript"脚本语言,如果任其发展下去,那么将会严重影响互联网发展,
于是标准化迫在眉睫。最后JavaScript被提交给提交给欧洲计算机制造商协会(ECMA),
并最终推出了ECMA-262标准,定义了名为ECMAScript的脚本语言,从此以后浏览器都将ECMAScript作为js的基础。
</div>
</body>
</html>

column-count会受到其他相关属性的影响。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS3 column-width下一篇:CSS3 column-gap

最新评论

返回顶部