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

4. 2. 2020 21:43:35

Řeším teď takovou zapeklitou věc, viz obrázek. Zvýraznil jsem padding a bordery, v reálu je to celé bílé.

30661

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.

4. 2. 2020 21:43:35

https://webtrh.cz/diskuse/zarovnani-radku-gridu-s-ruznym-fontem-ve-sloupcich#reply1435911

Petr Široký

(26 hodnocení)

4. 2. 2020 22:17:27

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. 2. 2020 22:17:27

https://webtrh.cz/diskuse/zarovnani-radku-gridu-s-ruznym-fontem-ve-sloupcich#reply1435910

PetrP

5. 2. 2020 08:02:46

Inu nepotěšil jste mě :) Ale díky, aspoń to nebudu zbytečně trápit.

5. 2. 2020 08:02:46

https://webtrh.cz/diskuse/zarovnani-radku-gridu-s-ruznym-fontem-ve-sloupcich#reply1435909

Michal Jeřábek

5. 2. 2020 10:18:28

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ů.

5. 2. 2020 10:18:28

https://webtrh.cz/diskuse/zarovnani-radku-gridu-s-ruznym-fontem-ve-sloupcich#reply1435908

Petr Široký

(26 hodnocení)

5. 2. 2020 10:50:56

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.

5. 2. 2020 10:50:56

https://webtrh.cz/diskuse/zarovnani-radku-gridu-s-ruznym-fontem-ve-sloupcich#reply1435907

(20 hodnocení)

5. 2. 2020 11:45:11

Petře ty nekodujes? Jenom grafika/UI?

5. 2. 2020 11:45:11

https://webtrh.cz/diskuse/zarovnani-radku-gridu-s-ruznym-fontem-ve-sloupcich#reply1435906

PetrP

5. 2. 2020 12:07:39

Tak align-items: baseline; jsem si nevšiml že existuje. Díky moc, funguje na první dobrou.

5. 2. 2020 12:07:39

https://webtrh.cz/diskuse/zarovnani-radku-gridu-s-ruznym-fontem-ve-sloupcich#reply1435905

Petr Široký

(26 hodnocení)

5. 2. 2020 12:28:20

Napsal Aleš Jiříček;1567732
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.

5. 2. 2020 12:28:20

https://webtrh.cz/diskuse/zarovnani-radku-gridu-s-ruznym-fontem-ve-sloupcich#reply1435904

Pro odpověď se přihlašte.

Přihlásit