html - CSS - 将 table-footer-group 与图像一起使用

Question

我一直想不通为什么我的图像不接受 display: table-footer-group 属性。当我将一个 div 包裹在图像中但图像本身不起作用时，它似乎可以工作。问题是我不能将图像包装在一个 div 中，必须使用以下标记，但将图像放在文本下方。我想做的就是将图片放在文字下方，但我这辈子都做不到。有任何想法吗？

带有 div 包装器的 JS Fiddle:http://jsfiddle.net/kSsAB/4/

JS Fiddle 只有图像:http://jsfiddle.net/ro5cprzz/1/

HTML:

<div class="label-below">
  <img alt="Some Text" src="http://placehold.it/350x150">
  <span> Some Text </span>
</div>

CSS:

.label-below{
 display: table;
}

img{
 display: table-footer-group;
}

span{
 display: table-row-group;
}

Answer 1

注意事项如下:

1. 没有详细说明您要做什么，
2. 为什么你有这些限制，
3. 您的图像是否为已知尺寸，以及
4. 它需要如何与父元素/页面的其余部分交互。

您可以使用绝对/相对定位来完成此操作:http://jsfiddle.net/v4ek6crn/

HTML

<div class="label-below">
    <img alt="Some Text" src="http://placehold.it/350x150">
    <span> Some Text </span>
 </div>

CSS

.label-below{
    position: relative;
}

img{
    position: absolute;
    top: 0;
    right 0;
}

span{
    position: absolute; 
    top: 150px;
    right 0;
}