将多个图像（带字幕）与基线对齐，所有高度均不同

Question

我一直在寻找如何让这个布局正常工作，我需要一些帮助

我只是希望我的图像与最高图像的基线，每行以及该行下方的标题对齐。我看到你在使用图像和jquery构建布局方面有很多经验。如果你能指出我正确的方向，我想我可以解决它。

这是我所拥有的jsfiddle，但我认为我可能不得不抛弃砖石，因为我的客户只是想要一个不错的基线......但是当然还有一个响应性的包装...... http://jsfiddle.net/perrodeagua/SeXDu/embedded/result/

这是我现在的css，虽然我还没跟它结婚

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

这是我需要的模型 http://postimg.org/image/sygkducs5/

谢谢！

Answer 1

你的意思是，像这样？ http://jsfiddle.net/LeBen/yFEc6/

在Chrome，Safari＆amp;默认情况下，使用<figure>将Firefox和图像与基线对齐。

Answer 2

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

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

Answer 3

编辑 -  如果你可以使用HTML5，Le Ben的答案比我的要好，但如果你需要支持IE 8，这应该可行

如果您的图片对齐方式如下：

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

你想要他们这样：

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

只需使用一些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/