Align thumbnail Images with different sizes, and with caption, at bottom

Question

I have a simple thumbnail with images and a caption for each image. The images do not have the same height but are always 125px. Captions can be short and long, they do not have the same height.

I want to align all of the images at the bottom so i can put the caption at the same level.

Did some research here and was able to align the images at the bottom, but without the caption

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

When i add the caption, well, it's a MESS!

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

EDIT: i've included an example with multiple wrapped thumbs

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

Basically, this is the effect i'm hoping for. Images with different height are all aligned at the bottom, and the caption starts at the same level. It's simple and clean.

Ive try using flexbox. But, maybe i'm wrong and there are better ways.

Any ideas how to achieve this ?

score 1 · Answer 1 · answered Apr 20 '17 at 19:49

In this very limited scenario I'd use absolute positioning for title and subtitle.

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>

This is helpful, unfortunately, when the thumbs are wrapped, they are on top of each other see https://jsfiddle.net/fuk45osb/4/ — Marco, Apr 20 '17 at 20:11
@Marco well, how did you envision it would work? :) Maybe you should have included that in your question. — Serg Chernata, Apr 20 '17 at 20:13
@Marco you added an example of how it currently stacks. I'm curious how you imagine it should stack. — Serg Chernata, Apr 20 '17 at 20:23
ok, i get what you're saying. I've added an image to show how they should stack — Marco, Apr 20 '17 at 20:32

score 1 · Answer 2 · answered Apr 20 '17 at 22:09

I kept researching a couple of more hours here and found an answer, for those who are interested.

The answer comes from this very similar post created years ago:

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

Basically, you just need to change the attribute align-items from flex-end to baseline. As simple as that.

Here's a working example https://jsfiddle.net/fuk45osb/7/

Align thumbnail Images with different sizes, and with caption, at bottom

2 Answers2