垂直对齐到父div的顶部和底部

Question

我试图实现以下布局而不使用javascript并且不使用表格：

页面上有很多行。每行由四个内容元素填充，其中最高的元素决定了行的高度。每个内容元素都有两个其他元素，在这种情况下是图像和标题。图像与行的顶部对齐，而标题与底部对齐。

在HTML结构中，图像和标题必须一起放在内容元素中。

一些解决方案，我已经试过：

分割每行分为两个：图像的行和字幕的一排，从分离的字幕图像。

使用着名的equal height column div结构导致一个丑陋的绝对定位Matryoshka娃娃安排divs。

表格的问题在于，将来页面会变得更加动态（可重新加标签的内容，流体布局，动态搜索，不同宽度的内容），并且表格会非常烦人。

Answer 1

如果我正确地想象你的标记，也许这会为你工作：

http://jsfiddle.net/Puppies4Life/Fd94X/1/

我绝对定位的.caption到.row的底部。由于.content的变化高度，我将它定位为.row，而不是直接父级.content。图像保留在文档的流程中。我添加了一些额外的填充到.row的底部以解释文本并将其置于简单的明确修复中（I suggest using a better option in your production code）

希望这有助于解决您的问题，或者可能会点燃一个或两个想法！