Właściwość wypełnienia kolumny CSS
Przykład
Określ sposób wypełniania kolumn:
.newspaper1 {
column-fill: auto;
}
.newspaper2 {
column-fill: balance;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość column-fillokreśla sposób wypełniania kolumn, zbalansowanych lub nie.
Porada: Jeśli dodasz wysokość do elementu wielokolumnowego, możesz kontrolować sposób, w jaki zawartość wypełnia kolumny. Treść może być równoważona lub uzupełniana sekwencyjnie.
| Domyślna wartość: | balansować |
|---|---|
| Dziedziczny: | nie |
| Animowalny: | nie. Przeczytaj o animacji |
| Wersja: | CSS3 |
| Składnia JavaScript: | obiekt .style.columnFill="auto" |
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 -moz- określają pierwszą wersję, która działała z przedrostkiem.
| Property | |||||
|---|---|---|---|---|---|
| column-fill | 50.0 | 10.0 | 52.0 13.0 -moz- |
10.0 7.0 -webkit- |
37.0 |
Składnia CSS
column-fill: balance|auto|initial|inherit;
Wartości nieruchomości
| Value | Description |
|---|---|
| balance | Default value. Fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally) |
| auto | Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly) |
| 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ść columnFill