CSS3 Multi-column
Treść tekstu CSS3 można zaprojektować jak gazeta wielokolumnowym układzie poniższych przykładach:
Ten poradnik - nauka jest nie tylko technika, ale również sen! Ten poradnik (www.w3big.com) stanowi najbardziej kompletny poradnik technologii programowania bazie wprowadza podstawy HTML, CSS, JavaScript, Python, Java, Ruby, C, PHP, MySQL i innych języków programowania. Ale strona również szereg przykładów line, tytułem przykładu, można lepiej nauczyć programowania.
Pomoc Browser
Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji metody.
Natychmiast po numerze -webkit- przeglądarki lub -moz- określonym prefiksem.
| nieruchomość | |||||
|---|---|---|---|---|---|
| column-count | 4,0 -webkit- | 10,0 | 2,0 -moz- | 3,1 -webkit- | 15,0 -webkit- 11,1 |
| column-gap | 4,0 -webkit- | 10,0 | 2,0 -moz- | 3,1 -webkit- | 15,0 -webkit- 11,1 |
| column-rule | 4,0 -webkit- | 10,0 | 2,0 -moz- | 3,1 -webkit- | 15,0 -webkit- 11,1 |
| column-rule-color | 4,0 -webkit- | 10,0 | 2,0 -moz- | 3,1 -webkit- | 15,0 -webkit 11,1 |
| column-rule-style | 4,0 -webkit- | 10,0 | 2,0 -moz- | 3,1 -webkit- | 15,0 -webkit 11,1 |
| column-rule-width | 4,0 -webkit- | 10,0 | 2,0 -moz- | 3,1 -webkit- | 15,0 -webkit 11,1 |
| Szerokość kolumny | 4,0 -webkit- | 10,0 | 2,0 -moz- | 3,1 -webkit- | 15,0 -webkit 11,1 |
CSS3 właściwości wielu kolumn
W tym rozdziale poznamy kilka dodatkowych właściwości kolumn z CSS3:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 tworzenie wielu kolumn
column-count atrybutów określa liczbę kolumn muszą być rozdzielone.
Element Poniższy przykład <div> w tekście jest podzielony na trzy:
Przykłady
-webkit-column-count: 3; / * Chrome, Safari, Opera * /
-moz-column-count: 3; / * Firefox * /
column-count: 3;
}
Spróbuj »
CSS3 szczelina multi-kolumna między kolumnami i kolumn
column-gap właściwość określa odstęp między kolumnami i kolumn.
Poniższy przykład wskazuje szczelinę pomiędzy kolumną a kolumna 40 pikseli:
Przykłady
-webkit-kolumna-gap: 40px; / * Chrome, Safari, Opera * /
-moz-column-gap: 40px; / * Firefox * /
column-gap: 40px;
}
Spróbuj »
Granice kolumn CSS3
column-rule-style właściwość określa kolumny w stylu granicy między kolumnami:
Przykłady
-webkit-kolumna-rule-style: ciało stałe; / * Chrome, Safari, Opera * /
-moz-column-rule-style: ciało stałe; / * Firefox * /
column-rule-style: ciało stałe;
}
Spróbuj »
column-rule-width atrybut określa grubość granicy dwóch:
Przykłady
-webkit-kolumna-rule-width: 1px; / * Chrome, Safari, Opera * /
-moz-column-rule-width: 1px; / * Firefox * /
column-rule-width: 1px;
}
Spróbuj »
column-rule-color atrybut określa kolor granicy dwóch:
Przykłady
-webkit-kolumna-rule-kolor: jasnoniebieski; / * Chrome, Safari, Opera * /
-moz-column-rule-kolor: jasnoniebieski; / * Firefox * /
column-rule-kolor: jasnoniebieski;
}
Spróbuj »
column-rule nieruchomość jest skrótem dla wszystkich kolumn, sprawowania rządów, * właściwości.
Poniższy przykład ustawia kolumny bezpośrednio na granicy grubości, koloru i stylu:
Przykłady
-webkit-column-zasada: 1px solid jasnoniebieski; / * Chrome, Safari, Opera * /
-moz-column-rule: 1px solid jasnoniebieski; / * Firefox * /
column-rule: 1px solid jasnoniebieski;
}
Spróbuj »
Ilu całej kolumny określonego elementu
Poniższy przykład określa <h2> elementu we wszystkich kolumnach:
Przykłady
-webkit kolumn rozpiętości: wszystko; / * Chrome, Safari, Opera * /
Kolumna rozpiętości: wszystko;
}
Spróbuj »
Określa szerokość kolumn
column-width atrybut określa szerokość kolumny.
Przykłady
-webkit-column-width: 100px; / * Chrome, Safari, Opera * /
column-width: 100px;
}
Spróbuj »
CSS3 właściwości wielu kolumn
Poniższa tabela zawiera wszystkie atrybuty CSS3 wielu kolumnach:
| nieruchomość | opis |
|---|---|
| column-count | Liczba kolumn podanych element powinien być podzielone. |
| column-fill | Określa, jak wypełnić kolumny |
| column-gap | Określa odstęp między kolumnami i kolumn |
| column-rule | Wszystkie kolumny sprawowania rządów, * skróconą własnością |
| column-rule-color | Określa kolor granicy między dwoma |
| column-rule-style | Określa styl granicy między dwoma |
| column-rule-width | Określa grubość obramowania między dwoma |
| Kolumna rozpiętości | Określa, ile kolumn przekroczyć elementu |
| Szerokość kolumny | Określa szerokość kolumn |
| kolumny | Ustawianie szerokości kolumny i kolumny count skrótowym |