CSS3 column-width用法

CSS3 column-width
column-width屬性用來規定列的寬度。
語法結構:

column-width: auto|length;

參數解析:
（1）.auto:預設值，它的值有其他的相關屬性決定。
（2）.length:規定列的寬度，例如100px。
瀏覽器支援:
（1）.IE10和IE10以上瀏覽器支援此屬性。
（2）.Google瀏覽器支援此屬性。
（3）.火狐瀏覽器支援此屬性。
（4）.opera瀏覽器支援此屬性。
（5）.Safari瀏覽器支援此屬性。
特別說明:
火狐瀏覽器需要加上 -moz-前綴。
Google和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。

繼續學習

新建檔案

<!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>

重置程式碼

自動運行

提交

預覽 Clear