Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

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

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!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...