Pomoc s CSS

5. 8. 2021 11:04:24

Ahoj.

Může mi prosím nějaký kodér poradit s tímto?

Mám tento kód a je použit Twitter Bootstrap 5 https://codepen.io/kejlicz/pen/zYwJegP

Potřebuji to upravit tak, aby byly všechny tři tlačítka ve stejné výšce, tedy aby ten nadpis a text byly normálně od shora a tlačítko by bylo umístěné na konci buňky CSS gridu.

Nějak s tím zápasím a nedaří se mi to.

Díky moc.

5. 8. 2021 11:04:24

https://webtrh.cz/diskuse/pomoc-s-css-2/#reply1488442

Tomáš Marek

(23 hodnocení)

5. 8. 2021 11:26:44

https://codepen.io/tom-marek/pen/KKmxEeX

Takhle bych to vyřešil já. Nevím jestli je to správně.

Koukám, že jsem tam dal class="art-top" :D nemusíš tam dávat žádnou classu. Prostě jen ten content musí být rozdělen na 2 divy a dáš tomu justify-content: space-between;

---

A takhle to jde udělat gridem, kdybys nechtěl používat flexbox.

https://codepen.io/tom-marek/pen/LYyJvPP

5. 8. 2021 11:26:44

https://webtrh.cz/diskuse/pomoc-s-css-2/#reply1488441

Hana Vlasakova

5. 8. 2021 11:50:22

.grid-item {

display: flex;

flex-direction: column;

justify-content: space-between;

}

.grid-item p {

flex-grow: 2;

}

5. 8. 2021 11:50:22

https://webtrh.cz/diskuse/pomoc-s-css-2/#reply1488440

Martin

(62 hodnocení)

5. 8. 2021 12:15:59

Napsal streetcz;1628256
https://codepen.io/tom-marek/pen/KKmxEeX
Takhle bych to vyřešil já. Nevím jestli je to správně.
Koukám, že jsem tam dal class="art-top" :D nemusíš tam dávat žádnou classu. Prostě jen ten content musí být rozdělen na 2 divy a dáš tomu justify-content: space-between;
---
A takhle to jde udělat gridem, kdybys nechtěl používat flexbox.
https://codepen.io/tom-marek/pen/LYyJvPP

Díky moc. Já jsem se s CSS Gridem teprve učím a nějak mě tohle nenapadlo. Přitom je to tak easy :-)

5. 8. 2021 12:15:59

https://webtrh.cz/diskuse/pomoc-s-css-2/#reply1488439

Pavel Mareš

(19 hodnocení)

5. 8. 2021 12:35:25

Napsal streetcz;1628256
https://codepen.io/tom-marek/pen/KKmxEeX
Takhle bych to vyřešil já. Nevím jestli je to správně.
Koukám, že jsem tam dal class="art-top" :D nemusíš tam dávat žádnou classu. Prostě jen ten content musí být rozdělen na 2 divy a dáš tomu justify-content: space-between;
---
A takhle to jde udělat gridem, kdybys nechtěl používat flexbox.
https://codepen.io/tom-marek/pen/LYyJvPP

Doplním @streetcz o tohle https://codepen.io/elardael/pen/zYwJXQv. U těhle easy věcí je GRID i FLEX jedno a to samý a může použít magin auto na spodní prvek, hornímu dát margin-bottom: 20px. Třeba.

Těch možností je celá řada.

5. 8. 2021 12:35:25

https://webtrh.cz/diskuse/pomoc-s-css-2/#reply1488438

Pro odpověď se přihlašte.

Přihlásit