[GELOEST] <img> in <figure> ausrichten?

[annsen]

Ich habe einen div-Container in dem sich 2 Bildbereiche (divs) befinden. Jeder dieser Bildbereiche enthält 2 Bilder (je in einem <figure>-Element.

<div class="container_bilder">

                <div class="bildbereich_1">

                    <figure>
                        <img class="" src="_img/muster.jpg" alt="" />
                    </figure>

                    <figure>
                        <img class="" src="_img/muster.jpg" alt="" />
                    </figure>

                </div>

                <div class="bildbereich_2">

                    <figure>
                        <img class="" src="_img/muster.jpg" alt="" />
                    </figure>

                    <figure>
                        <img class="" src="_img/muster.jpg" alt="" />
                    </figure>

                </div>

            </div>

    .container_bilder {
        width: 50%;
        display: flex;
        flex-direction: column;
    }

    .container_bilder img {
        max-width: 100%;
        margin: 0.5rem;
    }

Jetzt ist es so, dass sich die Bildbereiche (figure) an die Breite des Bild-Containers anpassen und damit etwas breiter sind, als die enthaltenen Bilder. Die Bilder ordnen sich linksbündig an (siehe unten) - ich will sie aber am rechten Rand ausgerichtet haben. Wie schaffe ich es, die Bilder rechtsbündig in den <figure>-Elementen anzuordnen? Die figure-Elemente kann ich ja nicht zu Flexboxen machen, um die enthaltenen Bilder per "align-items" auszurichten.

 

[annsen]

Vielen Dank!!
Ich hatte das ausprobiert aber der Browser hat es mir nicht angezeigt... wahrscheinlich (?) hatte ich die Anzeige nicht aktualisiert...