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

我已经搜索了几天如何让这个布局工作，我需要一些帮助

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

这是我得到的JSFIDLE，但我想我可能不得不放弃砌石，因为我的客户只是想要一个好的基线。。但当然要有响应性的包装。。

这是我现在的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;
}

这是我需要的模型

谢谢

你是说，像这样

在Chrome、Safari和Firefox中进行了实际测试，默认情况下使用

编辑-- 如果你能使用HTML5，勒本的答案比我的更酷，但如果你需要支持IE8，这应该行得通

如果您的图像是这样对齐的：

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

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

你希望他们像这样：

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

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

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

.img标题{显示：内联块；垂直对齐：底部；}
.caption{文本对齐：居中；}
图1

图2

图3

---

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

---

---

如果您的元素需要包装，那么浏览器支持仅限于Opera、Chrome和IE10

你能设置一个吗？请。。。所以CSS和HTML.com使用像lorempixel.com、dummyimage.com或placehold.it这样的服务来处理jsfiddle中的图像。您所要求的是默认行为：我们需要您的一些代码来帮助（不需要实际的图像，任何图像都可以工作，正如您在fiddle中看到的）@PeterVR：这是真的，但是，只有当你有一个单一的基线为所有的图像-你没有，如果你有标题下他们。漫画圣和小猫。。。我们现在想念的只有彩虹！这是我一整天看到的最可爱的答案。只要标题的行数相同，这就行了：在这种情况下，我建议将其截断，但它可能也不适合需要，最好将代码粘贴到答案中。永远不知道JSFIDLE什么时候会崩溃（这种情况经常发生）。现在它是勒本解决方案的精确副本。这是问题的答案，但与勒本的解决方案不同，它适用于IE 8。如果你不能依赖HTML5，你必须这样做。在这个例子中，元素是不相关的，因为问题是关于CSS（或者潜在的JavaScript）。您所做的只是复制LeBen的CSS并更改HTML元素。你甚至没有在演示中修改HTML。我是故意这么做的，所以它们很容易比较——元素是绝对相关的。试着在IE 8中运行勒本的答案——它不起作用。是我的。实际上，我遇到了麻烦，把你的代码屏蔽了，就在这里。它显然不适用于标题部分的可变行。你说的flexbox magik是什么？很酷！我正试图让元素保持在200px的宽度，我很乐意去做！我希望。。不过，我肯定需要对safari的支持！如果可能的话，让我看看。顺便说一句，你们真是太棒了！和似乎都不接受宽度：200px；：（flex/box flex属性导致宽度被忽略。只要放下它，它就会工作。只要你不需要包装，Safari就受支持。我只是不明白为什么你在figure元素中包含flex box代码，代码上写着/*可选*/，没有它会更好。无论如何，它工作得很好，谢谢！我没有这是一种在iOS中进行测试的方法，但它在Safari5 for Windows中确实有效。