将多个图像（带标题）与基线对齐，所有不同的高度

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 和 Firefox 中实际测试过，图像默认使用<figure> 与基线对齐。

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/