Vlastnost vyplnění sloupců CSS
Příklad
Určete, jak vyplnit sloupce:
.newspaper1 {
column-fill: auto;
}
.newspaper2 {
column-fill: balance;
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Vlastnost column-fill
určuje, jak vyplnit sloupce, vyvážené nebo ne.
Tip: Pokud k prvku s více sloupci přidáte výšku, můžete ovládat, jak obsah vyplní sloupce. Obsah může být vyvážený nebo postupně naplněný.
Výchozí hodnota: | Zůstatek |
---|---|
Zděděno: | Ne |
Animovatelné: | Ne. Přečtěte si o tématu Animable |
Verze: | CSS3 |
Syntaxe JavaScriptu: | objekt .style.columnFill="auto" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Čísla následovaná -moz- určují první verzi, která pracovala s předponou.
Property | |||||
---|---|---|---|---|---|
column-fill | 50.0 | 10.0 | 52.0 13.0 -moz- |
10.0 7.0 -webkit- |
37.0 |
Syntaxe CSS
column-fill: balance|auto|initial|inherit;
Hodnoty vlastností
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 |
Další příklady
Příklad
Rozdělte text v prvku <div> do tří sloupců:
div
{
column-count: 3;
}
Příklad
Určete mezeru 40 pixelů mezi sloupci:
div
{
column-gap: 40px;
}
Příklad
Zadejte šířku, styl a barvu pravidla mezi sloupci:
div
{
column-rule: 4px double #ff00ff;
}
Související stránky
CSS tutoriál: CSS Multiple Columns
Odkaz HTML DOM: vlastnost columnFill