Autor Zpráva
XolyCZ
Profil
Ahoj, mám malý problém. Mám například dva obrázky, které jsou v divu a ten div má flex. No a jediná Mozilla to zobrazuje dobře, aspoň teda tak, jak já chci, ale ostatní prohlížeče.. Chrome, Edge, Opera, ty to rozhazujou. Neví někdo proč?

Tohle je kód:

<div class="imagesCenterAlign">
    <img src="images/vyroci.jpg">
    <img src="images/vyroci1.jpg">
</div>

css potom vypadá takhle:
.imagesCenterAlign{
    display:flex;
    justify-content:space-evenly;
}

.imagesCenterAlign img{
    border:2px solid #eee;
}

Tady je obrázek, jak to vypadá: ctrlv.cz/tItq


EDIT: tak to, že ty obrázky byly větší než okno jsem upravil tím, že udělal tohle:

.imagesCenterAlign img{
    border:2px solid #eee;
    max-width:45%;
}

Ale proč ten Edge to zobrazuje všechno vlevo, když to místo mezi nimi má rozdělit?

ctrlv.cz/QtnM
XolyCZ
Profil
Tak nakonec jsem našel, že starý Edge to neumí, ale umí to jenom ten nový, který ještě spousta lidí nemá.. Viz: css-tricks.com/almanac/properties/j/justify-content

A to proč se mi ty obrázky zobrazovaly mimo stránku mi chybělo zalomení, takže to mám teď celé takhle:

.imagesCenterAlign{
    display:-webkit-flex;
    display:flex;
    justify-content:space-evenly;
    flex-wrap:wrap;
}

.imagesCenterAlign img{
    border:2px solid #eee;
    margin:1%;
}

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0