将多个图像（带字幕）与基线，所有不同的高度对齐 [英] 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

我只是想让我的图像对齐到基线的最高图像，每行，以及该行下方的字幕。我看到你有很多经验与图像和jquery建筑布局，如果你可以指出我的方向，我想我可以解决它。

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.

这里是jsfiddle为什么Ive得到，但我想我可能需要沟砌砖，因为我的客户只是想要一个不错的基线..但有一个响应的包装当然..
http://jsfiddle.net/perrodeagua/SeXDu/embedded/result/

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/

这是我目前的CSS，我没有结婚了

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

这里是我需要的mockup
http://postimg.org/image/sygkducs5/

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

谢谢！

推荐答案

如果您的字幕长度不均匀，那么Flexbox是您最好的纯CSS选项。

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>

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

如果您的元素需要换行，那么浏览器支持仅限于Opera，Chrome ，IE10。 http://caniuse.com/flexbox

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

这篇关于将多个图像（带字幕）与基线，所有不同的高度对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！