CSS3 multi-colonnes
CSS3 peut concevoir du contenu texte dans une mise en page multi-colonnes comme un journal
Voici les attributs pertinents utilisés par la colonne
1.column-width : < length> définit ou récupère automatiquement la largeur de chaque colonne de l'objet
Par exemple : -moz-column-width:200px
2.column-count: <integer> définit ou récupère automatiquement la colonne de l'objet Count
tel que : -webkit-column-count:3;
3.column-gap: <length> de l'objet
tel que : column-gap:normal;column-gap:40px;
4.column-rule: [ column-rule-width ] || [ column-rule-style ] | | Paramètres [ column-rule-color ] Ou récupérer les bordures entre les colonnes d'un objet. Propriétés composites. Équivalent à l'attribut border
tel que : column-rule:10px solid #090;
5.column-span: none | all Définit ou récupère si l'élément d'objet s'étend sur toutes les colonnes.
Par exemple : column-span:all;
6.column-fill: auto | balance Définit ou récupère si la hauteur de toutes les colonnes de l'objet est uniforme.
auto : contenu adaptatif à la hauteur des colonnes
balance : la hauteur de toutes les colonnes est unifiée avec la colonne la plus haute
Par exemple : column-fill:balance;
7.column-break-before : auto | toujours | éviter gauche | page droite | éviter-colonne Définit ou récupère s'il faut couper les lignes avant un objet.
auto : Il n'est ni forcé ni interdit de couper une ligne avant un élément et de créer une nouvelle colonne
toujours : Toujours couper une ligne avant un élément et de créer une nouvelle colonne
éviter : éviter de casser une ligne avant un élément et créer une nouvelle colonne Column
8.column-break-after: auto|always|avoid|left|right|page|column|avoid-page|avoid-column S'il faut casser le ligne après avoir défini ou récupéré l’objet.
auto : Il n'est ni forcé ni interdit de couper la ligne après l'élément et de générer une nouvelle colonne
toujours : Toujours couper la ligne après l'élément et générer une nouvelle colonne
éviter : Eviter de casser la ligne après l'élément et générer une nouvelle colonne
9.column-break-inside : auto |
auto : ne force ni n'interdit les sauts de ligne à l'intérieur des éléments et la création de nouvelles colonnes
éviter : éviter les sauts de ligne à l'intérieur des éléments et la création de nouvelles colonnes
Création CSS3 Multi- L'attribut column
column-count spécifie le nombre de colonnes à diviser.
L'exemple suivant divise le texte de l'élément <div> en 3 colonnes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
<div class="newspaper">
生长在非洲荒漠地带的依米花，默默无闻，少有人注意过它。许多旅人以为它只是一株草而已。但是，它会在一生中的某个清晨突然绽放出美丽的花朵。
那是无比绚丽的一朵花，似乎要占尽人世间所有色彩一样。它的花瓣儿呈莲叶状儿，每瓣自成一色：红、白、黄、蓝，与非洲大地上空的毒日争艳。
但是，它的花期很短，最多只有两天。两天后它就会随着母株一起枯萎，开花意味着它的生命的终结。
</div>
</body>
</html>Espace entre les colonnes dans plusieurs colonnes CSS3
l'attribut column-gap spécifie l'écart entre les colonnes.
L'exemple suivant spécifie un écart de 40 pixels entre les colonnes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
<div class="newspaper">
在非洲的荒漠地带，植物的生长需要水分，而开花的植物对水分的需求更大。
非洲一般植物都有庞大的根系采水，以供自身的水分需求。但是依米花没有根系，
它只有惟一的一条主根，孤独地蜿蜒盘曲着钻入地底深处，寻找有水的地方。
那需要幸运和顽强努力，一株依米花往往需要四至五年的时间在干燥的沙漠里寻找水源，然后一点点积聚养分，
在完成蓓蕾所需要的全部养分后，它开花了！所以在它最美丽的时候，它因耗尽了自己的所有的养分而凋零。
</div>
</body>
</html>Bordure de colonne CSS3
column-rule Le - L'attribut style spécifie le style de bordure entre les colonnes
Spécifie le nombre de colonnes que l'élément s'étend
L'exemple suivant spécifie que l'élément <h2> spans L'attribut column-width spécifie la largeur de la colonne.
Propriétés multi-colonnes CSS3Le tableau ci-dessous répertorie toutes les propriétés multi-colonnes CSS3 :
Description des propriétés
column-count Spécifie le nombre de colonnes selon lesquelles l'élément doit être divisé.
remplissage de colonne
colonne-règle Abréviation de toutes les propriétés de règle de colonne-* Spécifie la bordure entre deux colonnes Style
column-rule-width Spécifie l'épaisseur de la bordure entre deux colonnes
colonne- span Spécifie le nombre de colonnes que l'élément doit couvrir
largeur de colonne Spécifiez la largeur de la colonne
Colonnes Définissez l'abréviation de la largeur de couleur et du nombre de couleurs
section suivante