Question

对于我的生活，我无法弄清楚为什么我的图片不接受 display：table-footer-group 属性。当我将div包裹在图像内部但只是图像本身不起作用时，它似乎有效。问题是我无法在div中包装图像，必须使用以下标记，但将图像放在文本下方。我试图做的就是将图像放在文本下方，但是对于我的生活来说，不能让它发挥作用。有任何想法吗？

JS小提琴与div包装器：http://jsfiddle.net/kSsAB/4/

JS小提琴图像：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

有以下警告：

如果没有更多关于你要做什么的细节，
为什么你有限制，
您的图片是否为已知尺寸，
如何与父元素/页面的其余部分进行交互。

您可以通过绝对/相对定位来完成此任务：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;
}

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

1 个答案: