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: table上使用figure并在其上设置一个小宽度。因为它是一个表格布局，它将变得与内容一样宽，在这种情况下是图像。

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

<强> Demo

Answer 2

它继承自#page div。不是来自图像。请看更新相同的小提琴。但是，您可以控制单个元素。你必须指定你希望它的样子。

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>。我希望这会对你有所帮助。

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

3 个答案: