サムネイルを並べ替える異なるサイズの画像とキャプションが付いた画像を下部に表示

Question

画像ごとに簡単なサムネイルと各画像のキャプションがあります。画像の高さは同じではありませんが、常に125ピクセルです。 キャプションは短くても長くても、同じ高さではありません。

キャプションを同じレベルに置くことができるように、すべての画像を一番下に配置したいと思います。

はここにいくつかの研究を行なったし、一番下の画像を揃えることができたが、私はキャプションを追加するキャプション

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; 
} 

なくて、まあ、それはMESSです！

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

EDIT： 私は基本的に、これは私が望んだ効果である複数のラップ親指

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

に例を含めました。高さの異なる画像は、すべて下部に配置され、キャプションは同じレベルで開始されます。シンプルで清潔です。

アイブ氏は、フレキシボックスを使用してみてください。しかし、多分私は間違っていて、より良い方法があります。

これを実現する方法はありますか？

Answer 1

この非常に限定されたシナリオでは、私はタイトルとサブタイトルの絶対的な位置付けを使用します。

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

私はここでより多くの時間のカップルを研究保ち、興味がある人のために、答えを見つけました。

答えは数年前に作成され、この非常によく似た記事から来ている：

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

基本的に、あなただけのbaselineにflex-endから属性align-itemsを変更する必要があります。それと同じくらい簡単です。ここで

は、実施例はこれが便利です https://jsfiddle.net/fuk45osb/7/