CSS3 column-width用法
CSS3 column-width
column-width属性用来规定列的宽度。
语法结构:
column-width: auto|length;
参数解析:
（1）.auto:默认值，它的值有其他的相关属性决定。
（2）.length:规定列的宽度，比如100px。
浏览器支持:
（1）.IE10和IE10以上浏览器支持此属性。
（2）.谷歌浏览器支持此属性。
（3）.火狐浏览器支持此属性。
（4）.opera浏览器支持此属性。
（5）.Safari浏览器支持此属性。
特别说明:
火狐浏览器需要加 -moz-前缀。
谷歌和Safari浏览器需要添加-webkit-前缀。
代码实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</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（可以省略），可以发现由于没有设置其他的相关属性，那么就会以单列显示。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</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作为JavaScript的实现基础。
</div>
</body>
</html>代码设置column-count值为3，也就是设置三列显示，这个时候column-width就会根据相关属性自动调节。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</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作为JavaScript的实现基础。
</div>
</body>
</html>上面的代码设置宽为50px，3列，但是实际的表现并不是50px的宽。这时候列宽会自动扩展到一个合适的值，能够和3列和默认的Column-gap相匹配。特别说明一点，Column-gap的默认值是1em（如果使用的是px，那么就是字体的像素大小）。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</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作为JavaScript的实现基础。
</div>
</body>
</html>
列的总宽度加上Column-gap的总宽度如果大于容器的宽度，那么就会减少列的数目，也会调整列的宽度。
给出一个列的宽度计算基本公式（除column-count外，其他相关属性值为默认）:
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。
