CSS3 plusieurs colonnes

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

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

Formation continue

nouveau fichier

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

soumettre Réinitialiser le code

Opération automatique

CSS3 plusieurs colonnes

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]