快捷导航
蚂蚁部落 网站首页 前端教程 CSS3教程 查看内容

栏目导航

≡文本≡

≡颜色≡

≡单位≡

≡渐变≡

≡边框≡

≡背景≡

≡transform变换≡

≡transition过渡≡

≡animation动画≡

≡column多列布局≡

≡flex弹性布局≡

≡其他≡

CSS3 column-width

2018-3-31 21:08| 发布者: admin| 查看: 838| 评论: 0|来自: 蚂蚁部落

column-width属性用来规定列的宽度。

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

语法结构:

[CSS] 纯文本查看 复制代码
column-width: auto|length;

参数解析:

(1).auto:默认值,它的值由其他相关属性决定。

(2).length:规定列的宽度,比如100px。

浏览器支持:

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

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

代码设置column-count值为3,也就是设置三列显示,这个时候column-width就会根据相关属性自动调节。

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

上面的代码设置宽为50px,3列,但是实际的表现并不是50px的宽。这时候列宽会自动扩展到一个合适的值,能够和3列和默认的Column-gap相匹配。特别说明一点,Column-gap的默认值是1em(如果使用的是px,那么就是字体的像素大小)。

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

列的总宽度加上Column-gap的总宽度如果大于容器的宽度,那么就会减少列的数目,也会调整列的宽度。

给出一个列的宽度计算基本公式(除column-count外,其他相关属性值为默认):

[CSS] 纯文本查看 复制代码
column-width = (width-(n-1)*font-size)/n

n的值要大于等于2。下面做一下说明:

(1).n就是列数,n-1就是列与列之间的间隔(column-gap)。

(2).因为默认间隔的大小是字体大小,所以(n-1)*font-size就是所有间隔的尺寸。

(3).(width-(n-1)*font-size)/n就是列的宽度。

特别说明:Opera下建议再减1个px,中文也有类似的建议,再减去1px或者2px。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS3 columns下一篇:CSS3 column-count

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-21 10:09 , Processed in 0.096015 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部