CSS3 column-width usage
CSS3 column-width
column-width property is used to specify the width of the column.
Syntax structure:
column-width: auto|length;
Parameter analysis:
(1).auto: Default value, its value is determined by other related attributes.
(2).length: Specifies the width of the column, such as 100px.
Browser support:
(1). IE10 and IE10 or above browsers support this attribute.
(2). Google Chrome supports this attribute.
(3). Firefox browser supports this attribute.
(4).opera browser supports this attribute.
(5).Safari browser supports this attribute.
Special Note:
Firefox browser needs to add -moz- prefix.
Google and Safari browsers need to add the -webkit- prefix.
Code example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</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">
互聯(lián)網(wǎng)的出現(xiàn)，極大的促進了信息的交流，隨著步伐的前進，網(wǎng)站的交互需求越來越多，但是受限于當時的軟硬件條件，
特別是網(wǎng)絡環(huán)境的限制，非常簡單的表單驗證都要花費大量的時間在服務器與客戶端之間進行傳輸，
后來改名為JavaScript。隨著JavaScript在互聯(lián)網(wǎng)上的成功運用，微軟公司也隨之開發(fā)了自己的"JavaScript"名叫JScript，
于是在互聯(lián)網(wǎng)上就出現(xiàn)多種標準的"JavaScript"腳本語言，如果任其發(fā)展下去，那么將會嚴重影響互聯(lián)網(wǎng)發(fā)展，
于是標準化迫在眉睫。最后JavaScript被提交給提交給歐洲計算機制造商協(xié)會（ECMA），
并最終推出了ECMA-262標準，定義了名為ECMAScript的腳本語言，從此以后瀏覽器都將ECMAScript作為JavaScript的實現(xiàn)基礎。
</div>
</body>
</html>
The code sets the column-width value to the default value auto (can be omitted). It can be found that because no other related attributes are set, it will be displayed in a single column.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</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">
互聯(lián)網(wǎng)的出現(xiàn)，極大的促進了信息的交流，隨著步伐的前進，網(wǎng)站的交互需求越來越多，但是受限于當時的軟硬件條件，
特別是網(wǎng)絡環(huán)境的限制，非常簡單的表單驗證都要花費大量的時間在服務器與客戶端之間進行傳輸，
后來改名為JavaScript。隨著JavaScript在互聯(lián)網(wǎng)上的成功運用，微軟公司也隨之開發(fā)了自己的"JavaScript"名叫JScript，
于是在互聯(lián)網(wǎng)上就出現(xiàn)多種標準的"JavaScript"腳本語言，如果任其發(fā)展下去，那么將會嚴重影響互聯(lián)網(wǎng)發(fā)展，
于是標準化迫在眉睫。最后JavaScript被提交給提交給歐洲計算機制造商協(xié)會（ECMA），
并最終推出了ECMA-262標準，定義了名為ECMAScript的腳本語言，從此以后瀏覽器都將ECMAScript作為JavaScript的實現(xiàn)基礎。
</div>
</body>
</html>The code sets the column-count value to 3, which means setting a three-column display. At this time, the column-width will be automatically adjusted according to the relevant attributes.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</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">
互聯(lián)網(wǎng)的出現(xiàn)，極大的促進了信息的交流，隨著步伐的前進，網(wǎng)站的交互需求越來越多，但是受限于當時的軟硬件條件，
特別是網(wǎng)絡環(huán)境的限制，非常簡單的表單驗證都要花費大量的時間在服務器與客戶端之間進行傳輸，
后來改名為JavaScript。隨著JavaScript在互聯(lián)網(wǎng)上的成功運用，微軟公司也隨之開發(fā)了自己的"JavaScript"名叫JScript，
于是在互聯(lián)網(wǎng)上就出現(xiàn)多種標準的"JavaScript"腳本語言，如果任其發(fā)展下去，那么將會嚴重影響互聯(lián)網(wǎng)發(fā)展，
于是標準化迫在眉睫。最后JavaScript被提交給提交給歐洲計算機制造商協(xié)會（ECMA），
并最終推出了ECMA-262標準，定義了名為ECMAScript的腳本語言，從此以后瀏覽器都將ECMAScript作為JavaScript的實現(xiàn)基礎。
</div>
</body>
</html>The above code sets the width to 50px and 3 columns, but the actual performance is not 50px wide. At this time, the column width will automatically expand to a suitable value that can match 3 columns and the default Column-gap. In particular, the default value of Column-gap is 1em (if px is used, then it is the pixel size of the font).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</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">
互聯(lián)網(wǎng)的出現(xiàn)，極大的促進了信息的交流，隨著步伐的前進，網(wǎng)站的交互需求越來越多，但是受限于當時的軟硬件條件，
特別是網(wǎng)絡環(huán)境的限制，非常簡單的表單驗證都要花費大量的時間在服務器與客戶端之間進行傳輸，
后來改名為JavaScript。隨著JavaScript在互聯(lián)網(wǎng)上的成功運用，微軟公司也隨之開發(fā)了自己的"JavaScript"名叫JScript，
于是在互聯(lián)網(wǎng)上就出現(xiàn)多種標準的"JavaScript"腳本語言，如果任其發(fā)展下去，那么將會嚴重影響互聯(lián)網(wǎng)發(fā)展，
于是標準化迫在眉睫。最后JavaScript被提交給提交給歐洲計算機制造商協(xié)會（ECMA），
并最終推出了ECMA-262標準，定義了名為ECMAScript的腳本語言，從此以后瀏覽器都將ECMAScript作為JavaScript的實現(xiàn)基礎。
</div>
</body>
</html>
If the total width of the column plus the total width of the Column-gap is greater than the width of the container, then the number of columns will be reduced and the width of the columns will be adjusted.
Gives the basic formula for calculating the width of a column (except column-count, other related attribute values ????are default):
column-width = (width-(n-1)*font-size)/n
The value of n must be greater than or equal to 2. Let’s make some explanations:
(1). n is the number of columns, and n-1 is the gap between columns (column-gap).
(2). Because the default interval size is the font size, (n-1)*font-size is the size of all intervals.
(3).(width-(n-1)*font-size)/n is the width of the column.
Special note: It is recommended to subtract 1px under Opera. There are similar suggestions in Chinese, and then subtract 1px or 2px.
