Už dlhé roky sú plaváky CSS pre vytváranie webových stránok fiktívnym, ale nevyhnutným komponentom. Ak váš dizajn vyžiadal viac stĺpcov, otočíte sa na plávajúce body. Problém s touto metódou spočíva v tom, že napriek neuveriteľnej vynaliezanosti, ktorú web dizajnéri / vývojári preukázali pri vytváraní komplexných rozvrhov stránok, plaváky CSS nikdy neboli naozaj určené na použitie týmto spôsobom.
Zatiaľ čo plávajúce pozície a umiestnenie CSS určite majú miesto v dizajne webových stránok už niekoľko rokov, novšie techniky rozloženia vrátane CSS Grid a Flexbox teraz dávajú webové dizajnérom nové spôsoby, ako vytvoriť svoje rozloženie stránok. Ďalšou novou technikou usporiadania, ktorá ukazuje veľký potenciál, je CSS Multiple Columns.
Stĺpce CSS sú už niekoľko rokov, ale nedostatok podpory starších prehliadačov (hlavne starších verzií programu Internet Explorer) spôsobil, že mnohí weboví profesionálni používajú tieto štýly vo svojej výrobnej práci.
S koncom podpory pre tie staršie verzie IE niektorí web dizajnéri teraz experimentujú s novými možnosťami rozloženia CSS, vrátane stĺpcov CSS, a zistili, že majú s týmito novými prístupmi oveľa väčšiu kontrolu ako s plavidlami.
Základy stĺpcov CSS
Ako naznačuje jeho názov, viaceré stĺpce CSS (známe aj ako rozloženie viacerých stĺpcov CSS3) vám umožňujú rozdeliť obsah na nastavený počet stĺpcov. Najzákladnejšie vlastnosti CSS, ktoré by ste použili, sú:
- Kolóna-count
- stĺpec medzery
V prípade počtu stĺpcov zadáte požadovaný počet stĺpcov. Medzery v stĺpcoch by boli okapy alebo medzery medzi týmito stĺpcami. Prehliadač zoberie tieto hodnoty a rovnomerne rozdelí obsah na počet stĺpcov, ktoré zadáte.
Bežným príkladom viacerých stĺpcov CSS v praxi by bolo rozdelenie bloku textového obsahu na viaceré stĺpce, podobne ako to, čo by ste v novinovom článku videli. Povedzme, že máte nasledujúcu značku HTML (všimnite si napríklad, že som uviedol iba začiatok jedného odseku, zatiaľ čo v praxi by v tejto značke pravdepodobne existovali viaceré odseky obsahu):
Ak ste potom napísali tieto štýly CSS:
.content {-moz-stĺpec: 3; -webkit-count-count: 3; počet stĺpcov: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; medzera medzi stĺpcami: 30px; }
Toto pravidlo CSS rozdelí rozdelenie obsahu na tri rovnaké stĺpce s rozdielom 30 pixelov medzi nimi. Ak ste chceli dva stĺpce namiesto 3, jednoducho by ste túto hodnotu zmenili a prehliadač by vypočítal novú šírku týchto stĺpcov na rovnomerné rozdelenie obsahu. Všimnite si, že najprv používame vlastnosti predurčené dodávateľom, za ktorými nasledujeme deklarácie bez predpony.
Tak jednoduché je, že jeho použitie týmto spôsobom je sporné pri používaní webových stránok. Áno, môžete rozdeliť veľa stĺpcov do viacerých stĺpcov, ale nemusí to byť najlepší čitateľský zážitok pre web, a to najmä ak výška týchto stĺpcov klesne pod "záhyb" obrazovky.
Čitatelia by potom museli posúvať hore a dole, aby si prečítali celý obsah. Napriek tomu je hlavný prvok stĺpcov CSS taký jednoduchý, ako tu vidíte, a môže sa použiť na to, aby urobil toľko viac, než len rozdeliť obsah niektorých odsekov - to môže byť skutočne použité na usporiadanie.
Usporiadanie s stĺpcami CSS
Povedzme, že máte webovú stránku s obsahovou oblasťou, ktorá má 3 stĺpce obsahu. Toto je veľmi typické rozloženie webových stránok a na dosiahnutie týchto 3 stĺpcov by ste zvyčajne plavali divíziami, ktoré sa nachádzajú. S viacerými stĺpcami CSS je to oveľa jednoduchšie.
Tu je niekoľko vzorových HTML:
