Właściwość szerokości kolumny CSS
Przykład
Określ, że szerokość kolumny powinna wynosić 100px:
div
{
column-width: 100px;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość column-width
określa szerokość kolumny.
Liczba kolumn będzie minimalną liczbą kolumn potrzebną do wyświetlenia całej zawartości w elemencie.
column-width
jest właściwością elastyczną. Pomyśl o
column-width
minimalnej sugestii szerokości przeglądarki. Gdy przeglądarka nie zmieści co najmniej dwóch kolumn o określonej szerokości, kolumny zatrzymają się i spadną do jednej kolumny.
Domyślna wartość: | automatyczny |
---|---|
Dziedziczny: | nie |
Animowalny: | tak. Przeczytaj o animacji |
Wersja: | CSS3 |
Składnia JavaScript: | obiekt .style.columnWidth="100px" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Liczby, po których następuje -webkit- lub -moz- określają pierwszą wersję, która działała z przedrostkiem.
Property | |||||
---|---|---|---|---|---|
column-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
Składnia CSS
column-width: auto|length|initial|inherit;
Wartości nieruchomości
Value | Description | Play it |
---|---|---|
auto | Default value. The column width will be determined by the browser | |
length | A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Więcej przykładów
Przykład
Podziel tekst w elemencie <div> na trzy kolumny:
div
{
column-count: 3;
}
Przykład
Określ odstęp 40 pikseli między kolumnami:
div
{
column-gap: 40px;
}
Przykład
Określ szerokość, styl i kolor reguły między kolumnami:
div
{
column-rule: 4px double #ff00ff;
}
Powiązane strony
Samouczek CSS: wiele kolumn CSS
Dokumentacja HTML DOM: właściwość columnWidth