CSS3 - wiele kolumn
CSS3 obsługiwał wiele kolumn, aby uporządkować tekst jako strukturę gazety.
Niektóre z najczęściej używanych właściwości wielu kolumn, jak pokazano poniżej -
| Sr.No. | Wartość i opis |
|---|---|
| 1 | column-count Służy do obliczania liczby kolumn, które element powinien zostać podzielony. |
| 2 | column-fill Służy do decydowania, jak wypełnić kolumny. |
| 3 | column-gap Służy do decydowania o odstępie między kolumnami. |
| 4 | column-rule Służy do określenia liczby reguł. |
| 5 | rule-color Służy do określania koloru reguły kolumn. |
| 6 | rule-style Służy do określenia reguły stylu dla kolumny. |
| 7 | rule-width Służy do określenia szerokości. |
| 8 | column-span Służy do określania rozpiętości między kolumnami. |
Przykład
Poniższy przykład przedstawia układ tekstu w nowej strukturze papieru.
<html>
<head>
<style>
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* Column style property */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>
</head>
<body>
<div class = "multi">
Tutorials Point originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web
designing to academics and much more.
</div>
</body>
</html>To da następujący wynik -
Załóżmy, że jeśli użytkownik chce utworzyć tekst jako nowy papier bez linii, możemy to zrobić, usuwając składnię stylu, jak pokazano poniżej -
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}To da następujący wynik -