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, and the captions below that line. I see you have a lot of experience with building layouts with images and jquery, If you could point me in the right direction I think I could solve it.

Here is the jsfiddle for what Ive got, but I think I might have to ditch masonry as my client just wants a nice baseline.. but with a responsive wrap of course.. http://jsfiddle.net/perrodeagua/SeXDu/embedded/result/

Here's my current css, I ain't married to it though

.thePics {
padding:5px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 24px;
float: left;
 width:200px;
 height:auto;
 border:1px;
 text-align:left;


}

#PICS {
 width:auto;
}

And here is mockup of what I need http://postimg.org/image/sygkducs5/

Thanks!

use service like lorempixel.com, dummyimage.com or placehold.it for images in your jsfiddle. — G-Cyrillus, Jun 04 '13 at 20:08
what you are asking is default behaviour: http://jsfiddle.net/fxn64/ We will be needing some of you code to help (no need for the actual images, any image will work, as you can see in the fiddle) — Pevara, Jun 04 '13 at 20:13
@PeterVR: That is true, but only if you have one single baseline for all the images - which you don't, if you have captions underneath them. — kleinfreund, Jun 04 '13 at 20:23
You guys rock! What a nice community! OK so here is my fiddle http://jsfiddle.net/perrodeagua/SeXDu/ I am using masonry and phpthumb.. al images are 200px wide with variable height.. but all of this can change what i need most is the baseline, and the responsive wrap of the main container.. — Elias Escalante, Jun 05 '13 at 00:08

score 2 · Answer 1 · answered Jun 04 '13 at 20:12

2

You mean, like this? http://jsfiddle.net/LeBen/yFEc6/

Expected result

Actually tested in Chrome, Safari & Firefox and images are aligned to the baseline by default using <figure>.

answered Jun 04 '13 at 20:12

LeBen

1,884
12
21

1

comic sans and kittens... Al we miss now is the rainbows! – Pevara Jun 04 '13 at 20:14
1

This is the cutest answer I've seen all day. – Carol Skelly Jun 04 '13 at 20:15
This works fine as long as the captions have the same number of lines: http://jsfiddle.net/yFEc6/1/ – cimmanon Jun 04 '13 at 20:17
In this case I would suggest truncating it but it might not fit the needs http://jsfiddle.net/LeBen/yFEc6/4/ – LeBen Jun 04 '13 at 20:30
Also, it's preferred that you paste the code into your answer as well. Never know when jsfiddle will go down (which happens fairly often). – cimmanon Jun 04 '13 at 20:54
Here is what i have now, using masonry and phpthumb http://postimg.org/image/gi744v10z/ – Elias Escalante Jun 05 '13 at 00:09
I do need variable caption size. they can actually be quite big, I've never heard of the
element, but I think it might work with some tweaking. Let me wotk on it, thanks a lot btw!
– Elias Escalante Jun 05 '13 at 00:14
Then you should remove masonry as you try to do exactly the opposite of why it was designed for. – LeBen Jun 05 '13 at 07:19
Indeed, goodbye masonry, hello figure element, also hello Flexbox.. nice to meet you. – Elias Escalante Jun 05 '13 at 13:59
still . i find it hard to believe that this is not something jquery or vanilla javascript could handle easily.. personally i would love a mod for masonry that actually forced divs to float all the way left and not get stuck midway! Anyway
is a nice adition to html I didn't know about. Anyway if i ever figure out how to do it with jquery I'll come back here and post it. Thanks!
– Elias Escalante Jun 06 '13 at 02:26

score 1 · Accepted Answer · answered Jun 04 '13 at 20:26

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

<div class="gallery">
  <figure>
    <img src="http://placehold.it/100x200" />
    <figcaption>My caption here, this one is a really long one. Oh boy, so long.</figcaption>
  </figure>

  <figure>
    <img src="http://placehold.it/100x150" />
    <figcaption>My caption here</figcaption>
  </figure>
</div>

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

answered Jun 04 '13 at 20:26

cimmanon

67,211
17
165
171

What is this flexbox magik you speak of? Pretty cool! I'm trying to get the
element to stay at 200px width and I'm good to go! I hope.. I would definitely need support for safari though! let me check out if its possible. You people are awesome by the way!
– Elias Escalante Jun 05 '13 at 00:26
Neither the
nor the
seem to accept width:200px; :(
– Elias Escalante Jun 05 '13 at 00:43
The flex/box-flex property is causing the width to be ignored. Just drop it and it will work. As long as you don't need wrapping, Safari is supported. – cimmanon Jun 05 '13 at 11:30
I just never understood why you included the flex box code in the figure element, the code that says /* optional */, it works better without that. Anyway its working perfect, thanks! – Elias Escalante Jun 06 '13 at 15:42
I don't have a way to test in iOS, but it does work in Safari 5 for Windows. – cimmanon Jun 06 '13 at 18:07
is it possible to have the images aligned to the top, but have the captions aligned with each other? – kentor Nov 20 '13 at 21:45
Unfortunately, no. Not if the images are all irregularly sized. – cimmanon Nov 21 '13 at 02:09

Nathan Wallace · Answer 3 · 2013-06-05T14:08:54.043

-2

EDIT -- Le Ben's answer is cooler than mine if you can use HTML5, but if you need to support IE 8, this should work

If your images are aligning like this:

---- ---- ----
|  | |  | |  |
---- |  | ----
     ----

And you want them like this:

     ----
---- |  | ----
|  | |  | |  |
---- ---- ----

Just use some CSS:

<style type="text/css">
    .captioned-img { display: inline-block; vertical-align: bottom; }
    .caption       { text-align: center; }
</style>

<div class="captioned-img">
    <img />
    <p class="caption">Fig 1</p>
</div>
<div class="captioned-img">
    <img />
    <p class="caption">Fig 2</p>
</div>
<div class="captioned-img">
    <img />
    <p class="caption">Fig 3</p>
</div>

http://jsfiddle.net/YTaVr/

edited Jun 05 '13 at 14:08

answered Jun 04 '13 at 20:17

Nathan Wallace

2,154
4
23
28

Now it is an exact copy of LeBen's solution. – cimmanon Jun 04 '13 at 20:52
it's an answer to the problem, but unlike LeBen's solution, this one works for IE 8. If you can't rely on HTML 5, you have to do something like this – Nathan Wallace Jun 05 '13 at 14:08
The elements are irrelevant in this instance because the question is about the CSS (or potentially JavaScript). All you did is copy LeBen's CSS and change the HTML elements. You didn't even bother changing the HTML in the demo. – cimmanon Jun 05 '13 at 14:16
i did that on purpose, so they're easy to compare -- elements are absolutely relevant. try running LeBen's answer in IE 8 -- it doesn't work. mine does. – Nathan Wallace Jun 05 '13 at 14:24
OK. I actually went to the trouble of jsfiddling your code, just here it is. http://jsfiddle.net/perrodeagua/xgQSC/ it obviusly doesnt work with variable lines in the caption div.. – Elias Escalante Jun 06 '13 at 00:37

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

3 Answers3

Linked

Related