Utilisation de la largeur de colonne CSS3
La propriété CSS3 column-width
column-width est utilisée pour spécifier la largeur de la colonne.
Structure grammaticale?:
column-width: auto|length;
Analyse des paramètres?:
(1).auto?: valeur par défaut, sa valeur est déterminée par d'autres attributs associés.
(2).length?: Spécifie la largeur de la colonne, par exemple 100?px.
Prise en charge des navigateurs?:
(1) Les navigateurs IE10 et IE10 et supérieurs prennent en charge cet attribut.
(2). Google Chrome prend en charge cet attribut.
(3). Le navigateur Firefox prend en charge cet attribut. Le navigateur
(4).opera prend en charge cet attribut.
(5).Le navigateur Safari prend en charge cet attribut.
Remarque spéciale?:
Le navigateur Firefox doit ajouter le préfixe -moz-.
Les navigateurs Google et Safari doivent ajouter le préfixe -webkit-.
Exemple de code?:
<!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)境的限制，非常簡單的表單驗(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>
Le code définit la valeur de largeur de colonne sur la valeur par défaut auto (peut être omis). Comme aucun autre attribut associé n'est défini, il le sera. être affiché dans une seule colonne.
<!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)境的限制，非常簡單的表單驗(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>Le code définit la valeur du nombre de colonnes sur 3, ce qui signifie définir un affichage à trois colonnes. à ce stade, la largeur des colonnes sera automatiquement ajustée en fonction des attributs pertinents.
<!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)境的限制，非常簡單的表單驗(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>Le code ci-dessus définit la largeur à 50 px et 3 colonnes, mais les performances réelles ne sont pas de 50 px de large. à ce stade, la largeur de la colonne s'étendra automatiquement jusqu'à une valeur appropriée pouvant correspondre à 3 colonnes et à l'espacement de colonne par défaut. En particulier, la valeur par défaut de Column-gap est 1em (si px est utilisé, alors c'est la taille en pixels de la police).
<!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)境的限制，非常簡單的表單驗(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>
Si la largeur totale de la colonne plus la largeur totale de l'écart de colonne est supérieure à la largeur du conteneur, alors le nombre de colonnes sera réduit et la largeur de les colonnes seront également ajustées.
Donne la formule de base pour calculer la largeur d'une colonne (sauf le nombre de colonnes, les autres valeurs d'attributs associés sont par défaut)?:
column-width = (width-(n-1)*font-size)/n
La valeur de n doit être supérieure à ou égal à 2. Laissez-moi vous expliquer ci-dessous?:
(1) n est le nombre de colonnes, et n-1 est l'écart entre les colonnes (column-gap).
(2). étant donné que la taille de l'intervalle par défaut est la taille de la police, (n-1)*font-size est la taille de tous les intervalles.
(3).(width-(n-1)*font-size)/n est la largeur de la colonne.
Remarque spéciale?: il est recommandé de soustraire 1px sous Opera. Il existe des suggestions similaires en chinois, puis de soustraire 1px ou 2px.
