Layout CSS multi-coloană
Împărțirea textului în mai multe coloane, așa cum face un ziar, este ușoară cu Modulul Layout CSS multi-coloană.
Proprietăți CSS multi-coloană
Acestea sunt proprietățile multi-coloană explicate aici:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
CSS - Crearea coloanelor multiple
Proprietatea column-count stabilește în câte coloane este împărțit un element.
Exemplu
Textul acestui element <div> curge în 3 coloane:
Prompt
Creează o pagină HTML cu un element
<div> care conține un paragraf lung de text Lorem Ipsum. Folosește CSS column-count: 3 pentru a împărți textul în 3 coloane.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-count</title>
<style>
div {
column-count: 3;
}
</style>
</head>
<body>
<h1>Divide Text Into 3 Columns</h1>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
Spațiul dintre coloane CSS
Spațiul dintre coloane vine de la proprietatea column-gap.
Exemplu
Aceste coloane sunt la o distanță de 40 de pixeli una de alta:
Prompt
Creează o pagină HTML cu un element
<div> care conține un paragraf lung de text Lorem Ipsum. Folosește CSS column-count: 3 și column-gap: 40px pentru a împărți textul în 3 coloane cu un spațiu de 40 de pixeli între ele.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-gap</title>
<style>
div {
column-count: 3;
column-gap: 40px;
}
</style>
</head>
<body>
<h1>Specify Column Gap</h1>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
Subpagini despre coloane
Coloanele multiple CSS continuă pe această subpagină:
- Reguli pentru coloane — explică
column-rule,column-span,column-width
Proprietăți CSS multi-coloane
Iată toate proprietățile multi-coloană și rolul fiecăreia:
column-count— Setează numărul total de coloane în care trebuie împărțit un elementcolumn-fill— Controlează modul în care se umplu coloanelecolumn-gap— Setează spațiul lăsat între coloanecolumn-rule— Proprietate prescurtată care setează deodată toate proprietățile column-rule-*column-rule-color— Stabilește culoarea liniei trasate între coloanecolumn-rule-style— Stabilește stilul liniei trasate între coloanecolumn-rule-width— Setează cât de lată este linia trasată între coloanecolumn-span— Setează întinderea unui element, numărată în coloanecolumn-width— Sugerează o lățime optimă de coloană spre care să se tindăcolumns— Proprietate prescurtată care setează împreună column-width și column-count