Ausrichten thumbnail Bilder mit verschiedenen Größen und mit Bildunterschrift

Question

Ich habe ein einfaches Thumbnail mit Bildern und einer Bildunterschrift für jedes Bild. Die Bilder haben nicht die gleiche Höhe, sondern sind immer 125px. Untertitel können kurz und lang sein, sie haben nicht die gleiche Höhe.

Ich möchte alle Bilder an der Unterseite ausrichten, damit ich die Beschriftung auf dem gleichen Niveau setzen kann.

habe einige Nachforschungen hier und konnte die Bilder am unteren Rand auszurichten, aber ohne die Beschriftung

https://jsfiddle.net/0bzz7397/2/

.thumb { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: flex-end; 
} 

.thumb > div { 
    flex: 0 0 125px; 
    background-color: white; 
} 

.thumb > div ~ div { 
    margin-left: 20px; 
} 

Wenn ich die Beschriftung hinzufügen, gut, es ist ein Durcheinander!

https://jsfiddle.net/fuk45osb/1/

EDIT: i mehrfach umwickelten Daumen ein Beispiel mit

https://jsfiddle.net/fuk45osb/5/

Grundsätzlich enthalten haben, ist dies die Wirkung i erhofft bin. Bilder mit unterschiedlicher Höhe sind alle unten ausgerichtet und die Beschriftung beginnt auf derselben Ebene. Es ist einfach und sauber.

Ive versuchen Flexbox verwenden. Aber vielleicht irre ich mich und es gibt bessere Wege.

Irgendwelche Ideen wie man das erreicht?

Answer 1

In diesem sehr begrenzten Szenario würde ich absolute Positionierung für Titel und Untertitel verwenden.

body { 
 
    background: #eee; 
 
} 
 

 
.thumb { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    align-items: flex-end; 
 
} 
 

 
.thumb>div { 
 
    flex: 0 0 125px; 
 
    background-color: white; 
 
    position: relative; 
 
} 
 

 
.thumb>div~div { 
 
    margin-left: 20px; 
 
} 
 

 
.title { 
 
    position: absolute; 
 
    top: 100%; 
 
    background: #fff; 
 
    width: 100%; 
 
}

<div class="thumb"> 
 
    <div> 
 
    <a href=""><img src="" width="125" height="125"></a> 
 
    </div> 
 
    <div> 
 
    <a href=""><img src="" width="125" height="170"></a> 
 
    <div class="title">wefweergergerg erg er erg erg erg er gfwef</div> 
 
    </div> 
 
    <div> 
 
    <a href=""><img src="" width="125" height="125"></a> 
 
    </div> 
 
    <div> 
 
    <a href=""><img src="" width="125" height="130"></a> 
 
    </div> 
 
    <div> 
 
    <a href=""><img src="" width="125" height="160"></a> 
 
    </div> 
 
    <div> 
 
    <a href=""><img src="" width="125" height="125"></a> 
 
    <div class="title">wefwefwef</div> 
 
    </div> 
 
    <div> 
 
    <a href=""><img src="" width="125" height="125"></a> 
 
    </div> 
 
</div>

Answer 2

Ich hielt ein paar mehr Stunden hier untersucht, und fand eine Antwort, für diejenigen, die interessiert sind.

Die Antwort kommt aus diesem sehr ähnlichen Position erstellt Jahren:

Align multiple images (with captions) to baseline, all different heights

Grundsätzlich müssen Sie nur das align-items von flex-end zu baseline Attribut ändern. So einfach ist das.

Hier ist ein funktionierendes Beispiel https://jsfiddle.net/fuk45osb/7/