文章导航

CSS3 columns

2018-3-31 00:03| 发布者: admin| 查看: 1119| 评论: 0|来自: 蚂蚁部落

columns属性设置元素的列数和每列的宽度。

它是一个复合属性。

语法结构:

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

浏览器支持:

(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;
  -webkit-columns:150px 3;
  -moz--columns:150px 3;
  column-width:150px 3;
}
</style>
</head>
<body>
<div class="columns">
互联网的出现,极大的促进了信息的交流,随着步伐的前进,网站的交互需求越来越多,但是受限于当时的软硬件条件,
特别是网络环境的限制,非常简单的表单验证都要花费大量的时间在服务器与客户端之间进行传输,
后来改名为JavaScript。随着JavaScript在互联网上的成功运用,微软也随之开发了自己的"JavaScript"名叫JScript,
于是在互联网上就出现多种标准的"JavaScript"脚本语言,如果任其发展下去,那么将会严重影响互联网发展,
于是标准化迫在眉睫。最后JavaScript被提交给提交给欧洲计算机制造商协会(ECMA),
并最终推出了ECMA-262标准,定义了名为ECMAScript的脚本语言,从此浏览器都将ECMAScript作为js的实现基础。
</div>
</body>
</html>

上面的代码设置每一列的宽度为150px,共3列;可以看到即使你设置为150px宽度,实际每列的宽度也不是此值,这是因为要综合整个元素宽度和列数等因素综合考虑。

columns是符合属性,可以拆开单独设置,具体可以参阅以下两篇文章:

(1).column-width可以参阅CSS3 column-width一章节。

(2).column-count可以参阅CSS3 column-count一章节。 


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部