Gefloatete horizontal angeordnete Divs responsibel machen

[AgnusMacGyver]

Hallo zusammen,

ich habe ein Problem, dass mich seit Stunden beschäftigt und ich auch im Netz keine Lösung finde:

Ich möchte 3 horizontal angeordnete Bilder mit Bildunterschriften so responsibel machen, dass sich die Bilder skalieren, als auch die Bildunterschriften.

Anbei zwei Mockups vom IST-/SOLL-Zustand.
Die Bilder bzw. Bilduntertitel sind mit figure bzw. figcaption innerhalb eines div-Containers (#teaser) eingebettet.

Anforderungen:
1. Die Bilder sollen gleichmäß über die komplette Breite horizontal verteilt werden.
2. Bilder und Bildunterschriften sollen skalierbar sein. Aktuell rutscht mir Bild_3 unterhalb Bild_1 wenn ich das Browserfenster verkleinere.

Titelleiste und Navigation sind bereits skalierbar, nur an den Bildern scheitere ich.


HTML:
<main>
<section id="teaser">

<figure>
<img src="grafik/platzhalter.jpg" alt="">
<figcaption>Lorem ipsum ....</figcaption>
</figure>


<figure>
<img src="grafik/platzhalter.jpg" alt="">
<figcaption>Lorem ipsum ....</figcaption>
</figure>


<figure>
<img src="grafik/platzhalter.jpg" alt="">
<figcaption>Lorem ipsum ....</figcaption>
</figure>

</section>
</main>


CSS:

main {height: 800px;
width:100%;}

#teaser {
    margin: 0 auto;
    height: 300px;
    text-align: center;}

figure {
    margin: 50px 0;
    display: inline-block; }

figure img {
    padding: 0 30px;
    text-align: center;}

figcaption {
    max-width: 300px;
    text-align: justify;
    padding: 10px 30px;}

Danke & Grüße,
Fritz

 

[Tronjer]

Verwende ein gridbasiertes CSS Framework wie Bootstrap. Damit ist das einfach..

 

[AgnusMacGyver]

Anbei die Lösung:

#teaser {
display: table;
width: 100%;
}

figure {
display: table-cell;
padding: 0 4px;
text-align: center;
}