Właściwość column-count
Właściwość column-count ustawia rekomendowaną
liczbę kolumn w tekście wielokolumnowym.
Ich rzeczywista liczba może różnić się od
ustawionej, w zależności od szerokości kolumny
i rozmiaru odstępu między nimi.
Składnia
selektor {
column-count: liczba | auto;
}
Wartości
| Wartość | Opis |
|---|---|
| liczba | Ustawia określoną liczbę kolumn. Dokładniej, rekomenduje przeglądarce użycie tej liczby kolumn, ponieważ ich rzeczywista liczba może różnić się od ustawionej, w zależności od szerokości kolumny i rozmiaru odstępu między nimi. |
auto |
Przeglądarka sama dobiera optymalną liczbę kolumn. |
Wartość domyślna: auto.
Przykład
W tym przykładzie tekst podzieli się na 3
kolumny (oczywiście, w przeglądarkach, które
obsługują wielokolumnowość, w pozostałych
będzie po prostu zwykły tekst w jednej kolumnie):
<div id="elem">
some long text
</div>
#elem {
column-count: 3;
text-align: justify;
}
:
Przykład . Wartość auto
W tym przykładzie ustawiono szerokość kolumny column-width
na 150px, a ich liczba column-count
jest ustawiona na wartość auto - przeglądarka sama
dobierze wymaganą liczbę kolumn i
odstęp między nimi:
<div id="elem">
some long text
</div>
#elem {
column-count: auto;
column-width: 150px;
text-align: justify;
}
:
Zobacz też
-
właściwość
column-width,
która ustawia szerokość kolumny -
właściwość
column-gap,
która ustawia odstęp między kolumnami -
właściwość
column-rule,
która ustawia obramowanie między kolumnami -
właściwość
column-span,
która ustawia liczbę kolumn, na które powinien rozciągać się element -
właściwość
columns,
która jest właściwością-skrótem dla wielokolumnowości