CSS3 Multi-column Layout
Układ CSS3 multi-kolumna umożliwia łatwe określenie wielu kolumn tekstu - podobnie jak w prasie:
Codzienne Ping
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.
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby następnie -webkit- lub -moz- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| column-count | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-gap | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule-color | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-style | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
Właściwości CSS3 Multi-column
W tym rozdziale dowiesz się o następujących właściwościach multi-kolumna:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 Tworzenie wielu kolumnach
column-count właściwość określa liczbę kolumn element powinien zostać podzielony.
Poniższy przykład podzielić tekst w <div> elementu na 3 kolumnach:
Przykład
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Spróbuj sam " CSS3 Określ prześwit między kolumnami
column-gap właściwość określa odstęp między kolumnami.
Poniższy przykład określa odstęp 40 pikseli między kolumnami:
Przykład
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Spróbuj sam " CSS3 Zasady kolumnowe
column-rule-style właściwość określa styl rządów między kolumnami:
Przykład
div
{
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
Spróbuj sam " column-rule-width właściwość określa szerokość reguły między kolumnami:
Przykład
div
{
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
Spróbuj sam " column-rule-color właściwość określa kolor reguły między kolumnami:
Przykład
div
{
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
Spróbuj sam " column-rule Obiekt jest skróconą własnością dla ustawienia wszystkie kolumny sprawowania rządów, * właściwości powyżej.
Poniższy przykład ustawia szerokość, styl i kolor reguły między kolumnami:
Przykład
div
{
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
Spróbuj sam " Określ, ile kolumn element powinien Span
column-span właściwość określa, ile kolumn element powinien obejmować w poprzek.
W poniższym przykładzie określa, że <h2> element powinien rozciągać na wszystkich kolumnach:
Przykład
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
Spróbuj sam " Określ szerokość kolumny
column-width właściwość określa sugerowany, optymalną szerokość dla kolumn.
W poniższym przykładzie określa, że zasugerował, optymalna szerokość kolumn powinna być 100px:
Przykład
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
Spróbuj sam " Właściwości CSS3 kilku kolumn
Poniższa tabela zawiera wszystkie właściwości kilku kolumn:
| Nieruchomość | Opis |
|---|---|
| column-count | Określa liczbę kolumn element powinien być podzielony na |
| column-fill | Określa, jak wypełnić kolumny |
| column-gap | Określa odstęp między kolumnami |
| column-rule | Skrót nieruchomości na ustawienie wszystkich kolumn-sprawowania rządów, * właściwości |
| column-rule-color | Określa kolor reguły między kolumnami |
| column-rule-style | Określa styl rządów między kolumnami |
| column-rule-width | Określa szerokość reguły między kolumnami |
| column-span | Określa, ile kolumn element powinien obejmować całej |
| column-width | Określa sugerowaną, optymalną szerokość dla kolumn |
| columns | Skróconą własnością dla ustawienia szerokości kolumny i kolumny-count |