5.05a Több oszlop

Default book

Amikor internetes újságot szerkesztünk, akkor szükség lehet arra, hogy a megírt cikk tartalmát a böngésző automatikusan tördelje több oszlopra a képernyő geometriájától függően.

Erre vezette be a CSS3 a column utasításokat.

A rövid változat az alábbi:

coumns: szélesség oszlopok_száma;

Például: columns: 150px 3;

Ebben a példában a az oszlopok legkisebb szélessége 150px és maximálisan három oszlop lehet.

Ez a rövidített írásmód azonban a kibővített írásmóddal helyettesíthető:

  • column-count szám; - megadja az oszlopok számát.
  • column-fill:
    • auto - automatikusan beállítja a szöveg tördelését oszlopokba
    • balance - A szöveget úgy tördeli, hogy az oszlopok között egyenletes legyen az eloszlás
  •  
  • column-width: szélesség; - Az oszlop szélessége mekkora legyen
  • column-gap: számpx; - megadja, hogy milyen távolság legyen az egyes oszlopok között.
  • column-rule-color: szín; - az oszlopok közötti elválasztóvonal színe
  • column-rule-style: stílus (dotted, solid, stb...) - az oszlopok közötti elválasztóvonal stílusa. A bordernél használható stílusok közül lehet választani.
  • column-rule-width: vastagság; - Az elválasztóvonal vastagsága.
  • column-span: all | none; - Az oszlopok felett a <h2> tag átnyúljon-e mind felett vagy ne.