<p>元素从它上面的居中<img>继承宽度

Question

假设我有一个可变宽度的图像(min:100px,max:100%[760px]).我还有一个<p>要在图像正下方显示的元素.我希望<p>最终的宽度与之相同<img>,但我似乎无法找到答案.

这是jsfiddle这样的场景中涉及的代码:

HTML:

<div id='page'>
    <figure>
        <img src='http://www.myimage.com/img.jpg'/>
        <p>Hi there. I am some text. I would like to start where the image starts :(</p>
    </figure>
</div>

css:

#page {
    width:760px; /* arbitrary */
}

figure img {
    display: block;
    border: 1px solid #333;
    max-width: 100%;
    min-width: 100px;
    margin: 0 auto;
}

figure p {
    /* ??? */
}

有任何想法吗？

Answer 1

您可以使用display: tableonfigure并在其上设置一个较小的宽度。因为它是表格布局，所以它会变得与内容一样宽，在本例中是图像。

figure {
  display: table;
  width: 1%;
}

演示