css - 如何在图片下方放置标题且宽度相同？

Question

我想将标题放在我的图片下方(但仍在图片上)并且它的宽度与图片相同(图片的宽度可以改变)。

这是我所做的，但经过数小时的研究，我一直无法弄清楚如何将标题的宽度扩展到与图片相同的宽度。有人可以给我提示吗？谢谢

figure{
    position: relative;
}
figure img{
    z-index: 1;
}
figure .caption{
  display: block;
  width: 100%;
  position: absolute;
  bottom: 2px;
  color: #fff;
  background: rgba(0,0,0,0.7);
  padding: 8px 8px 8px 8px;

}

 <div class="img">
     <figure>
      <a href="#"><img  src="http://1.bp.blogspot.com/_xNTvSztbjn0/S9rYIIoIdkI/AAAAAAAAFHk/RCYU5iILKTc/s1600/0l+P1010254.jpg"/></a>
      <figcaption>
        <span class="caption">A short description</span>
        </figcaption>
    </figure>
  </div>

这是 fiddle http://jsfiddle.net/7hKKV/

Answer 1

稍微调整一下你的代码:

figure {
  position: relative;
  width: 100%;
}
figure img{
  z-index: 1;
  width: 100%;
}
figcaption {
  display: block;
  width: 100%;
  position: absolute;
  bottom: 2px;
  color: #fff;
  background: rgba(0,0,0,0.7);
}
figcaption .caption {
  display: inline-block;
  padding: 8px;
}

在父级设置 100% 宽度，将 caption 的样式移动到父级 figcaption，移动标题的 padding到 span，使您的图像 100% 宽度以填充容器

http://jsfiddle.net/LF33A/1/