Penggunaan lebar lajur CSS3
Lebar lajur CSS3
sifat lebar lajur digunakan untuk menentukan lebar lajur.
Struktur tatabahasa:
column-width: auto|length;
Analisis parameter:
(1).auto: Nilai lalai, nilainya ditentukan oleh atribut lain yang berkaitan.
(2).panjang: Menentukan lebar lajur, seperti 100px.
Sokongan penyemak imbas:
(1). Pelayar IE10 dan IE10 dan ke atas menyokong atribut ini.
(2). Google Chrome menyokong atribut ini.
(3). Penyemak imbas Firefox menyokong atribut ini.
(4).pelayar opera menyokong atribut ini.
(5).Pelayar Safari menyokong atribut ini.
Nota khas:
Penyemak imbas Firefox perlu menambah awalan -moz-.
Pelayar Google dan Safari perlu menambah awalan -webkit-.
Contoh kod:
<!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)，極大的促進(jìn)了信息的交流，隨著步伐的前進(jìn)，網(wǎng)站的交互需求越來越多，但是受限于當(dāng)時(shí)的軟硬件條件，
特別是網(wǎng)絡(luò)環(huán)境的限制，非常簡(jiǎn)單的表單驗(yàn)證都要花費(fèi)大量的時(shí)間在服務(wù)器與客戶端之間進(jìn)行傳輸，
后來改名為JavaScript。隨著JavaScript在互聯(lián)網(wǎng)上的成功運(yùn)用，微軟公司也隨之開發(fā)了自己的"JavaScript"名叫JScript，
于是在互聯(lián)網(wǎng)上就出現(xiàn)多種標(biāo)準(zhǔn)的"JavaScript"腳本語言，如果任其發(fā)展下去，那么將會(huì)嚴(yán)重影響互聯(lián)網(wǎng)發(fā)展，
于是標(biāo)準(zhǔn)化迫在眉睫。最后JavaScript被提交給提交給歐洲計(jì)算機(jī)制造商協(xié)會(huì)（ECMA），
并最終推出了ECMA-262標(biāo)準(zhǔn)，定義了名為ECMAScript的腳本語言，從此以后瀏覽器都將ECMAScript作為JavaScript的實(shí)現(xiàn)基礎(chǔ)。
</div>
</body>
</html>
Kod menetapkan nilai lebar lajur kepada auto nilai lalai (boleh diketepikan kerana tiada atribut lain yang berkaitan ditetapkan, ia akan ditetapkan). dipaparkan dalam satu lajur.
<!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)，極大的促進(jìn)了信息的交流，隨著步伐的前進(jìn)，網(wǎng)站的交互需求越來越多，但是受限于當(dāng)時(shí)的軟硬件條件，
特別是網(wǎng)絡(luò)環(huán)境的限制，非常簡(jiǎn)單的表單驗(yàn)證都要花費(fèi)大量的時(shí)間在服務(wù)器與客戶端之間進(jìn)行傳輸，
后來改名為JavaScript。隨著JavaScript在互聯(lián)網(wǎng)上的成功運(yùn)用，微軟公司也隨之開發(fā)了自己的"JavaScript"名叫JScript，
于是在互聯(lián)網(wǎng)上就出現(xiàn)多種標(biāo)準(zhǔn)的"JavaScript"腳本語言，如果任其發(fā)展下去，那么將會(huì)嚴(yán)重影響互聯(lián)網(wǎng)發(fā)展，
于是標(biāo)準(zhǔn)化迫在眉睫。最后JavaScript被提交給提交給歐洲計(jì)算機(jī)制造商協(xié)會(huì)（ECMA），
并最終推出了ECMA-262標(biāo)準(zhǔn)，定義了名為ECMAScript的腳本語言，從此以后瀏覽器都將ECMAScript作為JavaScript的實(shí)現(xiàn)基礎(chǔ)。
</div>
</body>
</html>Kod menetapkan nilai kiraan lajur kepada 3, yang bermaksud menetapkan paparan tiga lajur Pada masa ini, lebar lajur akan dilaraskan secara automatik mengikut atribut yang berkaitan.
<!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)，極大的促進(jìn)了信息的交流，隨著步伐的前進(jìn)，網(wǎng)站的交互需求越來越多，但是受限于當(dāng)時(shí)的軟硬件條件，
特別是網(wǎng)絡(luò)環(huán)境的限制，非常簡(jiǎn)單的表單驗(yàn)證都要花費(fèi)大量的時(shí)間在服務(wù)器與客戶端之間進(jìn)行傳輸，
后來改名為JavaScript。隨著JavaScript在互聯(lián)網(wǎng)上的成功運(yùn)用，微軟公司也隨之開發(fā)了自己的"JavaScript"名叫JScript，
于是在互聯(lián)網(wǎng)上就出現(xiàn)多種標(biāo)準(zhǔn)的"JavaScript"腳本語言，如果任其發(fā)展下去，那么將會(huì)嚴(yán)重影響互聯(lián)網(wǎng)發(fā)展，
于是標(biāo)準(zhǔn)化迫在眉睫。最后JavaScript被提交給提交給歐洲計(jì)算機(jī)制造商協(xié)會(huì)（ECMA），
并最終推出了ECMA-262標(biāo)準(zhǔn)，定義了名為ECMAScript的腳本語言，從此以后瀏覽器都將ECMAScript作為JavaScript的實(shí)現(xiàn)基礎(chǔ)。
</div>
</body>
</html>Kod di atas menetapkan lebar kepada 50px dan 3 lajur, tetapi prestasi sebenar bukan 50px lebar. Pada masa ini, lebar lajur akan berkembang secara automatik kepada nilai yang sesuai yang boleh memadankan 3 lajur dan jurang Lajur lalai. Khususnya, nilai lalai bagi Column-gap ialah 1em (jika px digunakan, maka ia ialah saiz piksel fon).
<!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)，極大的促進(jìn)了信息的交流，隨著步伐的前進(jìn)，網(wǎng)站的交互需求越來越多，但是受限于當(dāng)時(shí)的軟硬件條件，
特別是網(wǎng)絡(luò)環(huán)境的限制，非常簡(jiǎn)單的表單驗(yàn)證都要花費(fèi)大量的時(shí)間在服務(wù)器與客戶端之間進(jìn)行傳輸，
后來改名為JavaScript。隨著JavaScript在互聯(lián)網(wǎng)上的成功運(yùn)用，微軟公司也隨之開發(fā)了自己的"JavaScript"名叫JScript，
于是在互聯(lián)網(wǎng)上就出現(xiàn)多種標(biāo)準(zhǔn)的"JavaScript"腳本語言，如果任其發(fā)展下去，那么將會(huì)嚴(yán)重影響互聯(lián)網(wǎng)發(fā)展，
于是標(biāo)準(zhǔn)化迫在眉睫。最后JavaScript被提交給提交給歐洲計(jì)算機(jī)制造商協(xié)會(huì)（ECMA），
并最終推出了ECMA-262標(biāo)準(zhǔn)，定義了名為ECMAScript的腳本語言，從此以后瀏覽器都將ECMAScript作為JavaScript的實(shí)現(xiàn)基礎(chǔ)。
</div>
</body>
</html>
Jika jumlah lebar lajur ditambah dengan jumlah lebar Jurang Lajur lebih besar daripada lebar bekas, maka bilangan lajur akan dikurangkan dan lebar lajur juga akan dilaraskan.
Memberi formula asas untuk mengira lebar lajur (kecuali kiraan lajur, nilai atribut berkaitan lain ????adalah lalai):
column-width = (width-(n-1)*font-size)/n
Nilai n mestilah lebih besar daripada atau sama dengan 2. Biar saya terangkan di bawah:
(1 n ialah bilangan lajur dan n-1 ialah jurang antara lajur (jurang-lajur).
(2). Oleh kerana saiz selang lalai ialah saiz fon, (n-1)*saiz fon ialah saiz semua selang.
(3).(lebar-(n-1)*saiz fon)/n ialah lebar lajur.
Nota istimewa: Adalah disyorkan untuk menolak 1px di bawah Opera Terdapat cadangan serupa dalam bahasa Cina, dan kemudian menolak 1px atau 2px.
