Vlastnost CSS o šířce sloupce
Příklad
Určete, že šířka sloupce by měla být 100 pixelů:
div
{
column-width: 100px;
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Vlastnost column-width
určuje šířku sloupce.
Počet sloupců bude minimální počet sloupců potřebný k zobrazení veškerého obsahu v prvku.
column-width
je flexibilní vlastnost. Berte
column-width
to jako návrh minimální šířky pro prohlížeč. Jakmile se prohlížeči nevejdou alespoň dva sloupce na vámi zadanou šířku, sloupce se zastaví a spadnou do jednoho sloupce.
Výchozí hodnota: | auto |
---|---|
Zděděno: | Ne |
Animovatelné: | Ano. Přečtěte si o tématu Animable |
Verze: | CSS3 |
Syntaxe JavaScriptu: | objekt .style.columnWidth="100px" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Čísla následovaná -webkit- nebo -moz- určují první verzi, která pracovala s předponou.
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 |
Syntaxe CSS
column-width: auto|length|initial|inherit;
Hodnoty vlastností
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 |
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 columnWidth