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

Question

假设我有一张可变宽度的图片 (最小: 100px，最大: 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 {
    /* ??? */
}

有什么想法吗？

- a.real.human.being

---

你喜欢这个 http://jsfiddle.net/a9rEh/1/ 吗？ - Karuppiah RK

你需要为 figure 定义一个与图片宽度相同的宽度。 - davidpauljunior

你这样做的目的是什么？你想制作一个标题吗？ - asubanovsky

最佳实践是使用表格来放置图像和标题。 - Pandiyan Cool

@PandiyanCool 你的意思是 display: table，使用 <table> 并不是最佳实践，因为这不是表格数据。 - davidpauljunior

Answer 1

您可以在figure上使用display: table，并将其设置为较小的宽度。由于这是一个表格布局，它将变得像内容一样宽，例如图像。

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

Demo

- davidpauljunior

---

很遗憾，该图像不再在其父元素中心对齐。 - a.real.human.being

嗯，这是一个有趣的解决方案。你认为这种类型的解决方案是否遵循“最佳实践”？ - a.real.human.being

@a.real.human.being 嗯，这是我知道的唯一使用纯CSS的方法，从语义上讲也是正确的。 - davidpauljunior

Answer 2

它是从 #page div 继承而来，而不是从图像继承。请参见更新后的同一 fiddle。 但是，您可以控制各个元素。您必须指定您希望它看起来像什么。

- Siva Tumma

---

我认为OP的意思是他们希望<p>元素从图片那里继承宽度，而不是说它已经继承了宽度。 - davidpauljunior

好的，如果这样的话，他必须提前知道图像的宽度。在CSS中动态设置值？从兄弟节点继承规则？我认为这是不可能的。 - Siva Tumma

Answer 3

这是我使用FIDDLE制作的代码：

HTML:

<div id='page'>
    <figure>
        <img src='http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg'/>
        <figcaption>Hi there. I am some text. I would like to start where the image starts :(</figcaption>
    </figure>
</div>

CSS：

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


figure{
    padding-left: 10%;
}

实际上，有几种方法可以制作图像标题，例如使用<table>。我并不是说这是最好的方法。但是，由于我看到你正在使用<figure>，所以这是最简单的方法。希望这能帮助到你。

- asubanovsky

---

我已经缩小了图像尺寸并更新了代码片段。请注意它是否破坏了这个用例。 - Siva Tumma