html - 将figcaption与图中的图像底部对齐

<figure>
     <img src="http://lorempixel.com/x/x" alt="figure">
     <figcaption>Nam elementum non massa at mattis.</figcaption>
</figure>

我正在创建一个CSS文件，并希望将figcaption的宽度为100％，将半透明的背景色放置在图像的顶部，但是我希望figcaption框的底部和图像的底部始终是无论使用什么图像都一样。

最佳答案

在figcaption元素上使用绝对定位。也不要忘记在图形元素上设置“position:relative”。这是一个示例:http://jsfiddle.net/armordecai/xL1bk6k7/

figure {
     position: relative;
}
figure img {
    display: block;
}
figcaption {
    background: rgba(0, 0, 0, 0.5);
    color: #FFF;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

关于html - 将figcaption与图中的图像底部对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17078759/