Respirátory KN95/FFP 2 a roušky
Zobrazují se odpovědi 1 až 8 z 8

Zarovnání řádků gridu s různým fontem ve sloupcích

  1. sipal
    ? ( 0 hodnocení )
    sipal je zatím velká neznámá 04.02.2020 21:43
    1
    Řeším teď takovou zapeklitou věc, viz obrázek. Zvýraznil jsem padding a bordery, v reálu je to celé bílé.

    Název: line.png Zobrazení: 104 Velikost: 15,2 KB

    Mám grid, 2 sloupce, a každý má jinak velký font a line-height. A když jsou ty dva sloupce vedle sebe, tak text většího fontu je uskočený dolů. Chtěl bych, aby základní linky prvního řádku textu v obou sloupcích byly zarovnané. Dá se to řešit nějak obecně pro libovolnou dvojici fontů, nebo prostě musím na pravý sloupec nasadit příslušný padding-top, aby se to srovnalo? Levý sloupec je vždy jednořádkový, jestli to něčemu pomůže.

    Našel jsem vertical-align: baseline, ale nevykoumal jsem jak to má fungovat.

    Díky za každou radu.
  2. Co se právě děje na Webtrhu?
  3. Petr Široký
    A ( 26 hodnocení )
    Petr Široký is a name known to allPetr Široký is a name known to allPetr Široký is a name known to allPetr Široký is a name known to allPetr Široký is a name known to allPetr Široký is a name known to all 04.02.2020 22:17
    2
    Musíš ručně. I kdyby ten baseline fungoval (jako že ne, protože vertical-align se používal jen pro tabulky, pokud se nepletu), tak se bere v závislosti na jednom řádku, jen pomocí css není jak tomu říct, že chceš vzít jen první řádek odstavce. Myslím že s tímhle bude mít problém i většina grafických/designérských programů. Ale nevidím v ručním napozicování problém, asi nebudeš mít mnoho odlišných případů, kdy bys měl pokaždé jiný font nebo velikost.
  4. sipal
    ? ( 0 hodnocení )
    sipal je zatím velká neznámá 05.02.2020 08:02
    3
    Inu nepotěšil jste mě :) Ale díky, aspoń to nebudu zbytečně trápit.
  5. mjerabek
    ? ( 0 hodnocení )
    mjerabek je na dobré cestě 05.02.2020 10:18
    4
    Fungovat to může, ale záleží, jak přesně je možné ty sloupce udělat. Například pomocí flexboxu: https://codepen.io/michaljerabek/pen/NWqKexO

    ---------- Příspěvek doplněn 05.02.2020 v 10:21 ----------

    Jinak vertical-align funguje u jakýchkoliv inline elementů.
  6. Petr Široký
    A ( 26 hodnocení )
    Petr Široký is a name known to allPetr Široký is a name known to allPetr Široký is a name known to allPetr Široký is a name known to allPetr Široký is a name known to allPetr Široký is a name known to all 05.02.2020 10:50
    5
    Super, tady jsem se poučil také - myslel jsem si, že podobné věci opravdu zatím nejde udělat a že to css neumí rozeznat.
  7. Aleš Jiříček
    A ( 20 hodnocení )
    Aleš Jiříček has a reputation beyond reputeAleš Jiříček has a reputation beyond reputeAleš Jiříček has a reputation beyond reputeAleš Jiříček has a reputation beyond reputeAleš Jiříček has a reputation beyond reputeAleš Jiříček has a reputation beyond reputeAleš Jiříček has a reputation beyond reputeAleš Jiříček has a reputation beyond reputeAleš Jiříček has a reputation beyond reputeAleš Jiříček has a reputation beyond reputeAleš Jiříček has a reputation beyond repute 05.02.2020 11:45
    6
    Petře ty nekodujes? Jenom grafika/UI?
  8. sipal
    ? ( 0 hodnocení )
    sipal je zatím velká neznámá 05.02.2020 12:07
    7
    Tak align-items: baseline; jsem si nevšiml že existuje. Díky moc, funguje na první dobrou.
  9. Petr Široký
    A ( 26 hodnocení )
    Petr Široký is a name known to allPetr Široký is a name known to allPetr Široký is a name known to allPetr Široký is a name known to allPetr Široký is a name known to allPetr Široký is a name known to all 05.02.2020 12:28
    8
    Citace Původně odeslal Aleš Jiříček Zobrazit příspěvek
    Petře ty nekodujes? Jenom grafika/UI?
    Kóduji, ale ne tak často (flexbox používám pořád, ale nemyslel jsem si, že baseline bude respektovat první řádek v odstavci, nikdy jsem to takhle nepoužil, nebylo proč) a některé věci taky zapomínám - například fungování vertical-align, se kterým byly vždycky jen problémy.
Spolupracujeme: Jooble.org Hostujeme u Server powered by TELE3