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

Question

I\'ve been searching for days how to get this layout working, I need a little help

I just want my images to be aligned to the baseline of the tallest image, per line

Answer 1

If your captions are all of uneven lengths as well, then Flexbox is your best pure CSS option.

http://codepen.io/cimmanon/pen/vJeDk

  

    
    
My caption here, this one is a really long one. Oh boy, so long.
  

  

    
    
My caption here
  

The CSS:

.gallery {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: baseline;
  -webkit-align-items: baseline;
  align-items: baseline;
  -webkit-box-align: baseline;
  -moz-box-align: baseline;
}

.gallery figure {
  /* optional */
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
}

/* optional */
.gallery {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

If your elements need to wrap, then browser support is limited to Opera, Chrome, and IE10. http://caniuse.com/flexbox