视觉上在图像下方标题，但在语义上方

Question

我正在寻找添加图片以及标题/标题。 我希望将标题保持在图像上方的语义，但在视觉上，在任何想法如何只使用CSS和HTML？

http://jsfiddle.net/jamesgorrie/vRxuB/9/

请注意，标题需要具有动态的大小，段落也是如此。该段落可以在语义上方或下方，但在语义和视觉上低于标题。

更新：无法假设图像大小。 到目前为止，我得到的最近的是：http://jsfiddle.net/jamesgorrie/vRxuB/23/

Answer 1

为什么不这样做：

<figure>
        <img src="yay.jpg" alt="">
        <figcaption>
                yay!!!
        </figcaption>
</figure>

这是完全语义的HTML5