html - 按子元素对齐两个 DIV

Question

我目前正在尝试找出一种使用 CSS 来布局语义定义的多图像图形的方法，每个图像可能都有自己的子标题。这种图形的语义是一个外部 <figure> div 包含多个 <figure class=subfigure> div。每个 .subfigure div 恰好包含一个 <img>其次是 <figcaption class=subfigcaption> .

这是一个minimal working example on JSFiddle

目标: 我正在努力实现一种在打印媒体中很常见的布局；每个.subfigure由其独特的 <img> 的基线垂直对齐元素，而它自己的.subfigcaption可以在不影响 <img> 的相对位置的情况下根据需要运行在每个子图中。

但是，使用我当前的布局代码，我只能相对对齐每个 .subfigure作为一个整体:<img>和 .subfigcaption被视为聚合 block 。可以看出结果是in my working example , 一个长的副标题会破坏子图之间的图像对齐。

我真的很想找到一个不需要我更改语义相关 HTML 的 CSS 解决方案。我考虑过使用表格布局格式，但鉴于我的 html 当前的组织方式，我看不到如何正确放置表格行。此外，这种样式将应用于大量内容，因此我无法手动精确调整每个特定图形。

---

注意:做 figure>figure {vertical-align: top;}这个例子看起来不错，但不是我要找的。目标是模仿打印惯例，我们在图像的底部对齐，而不是顶部。事实上，更准确的目标是拥有所有的.subfigcaptions。无论图像的相对大小如何，都从一个共同的基线开始。

---

当前布局

所需布局

Answer 1

呃，我是不是遗漏了什么，或者只是删除 vertical-align: middle 给你想要的结果:

http://jsfiddle.net/LzUaC/9/