Question

我有一个div，带有图像。

我希望标题位于图像下方，而不会扩展父div的宽度。我不想在父div上设置固定宽度;我希望它扩展到图像的大小，这就是文本为新行打破的宽度。

<div>
     <img src=http://placehold.it/140x140>
     <span>this is a caption this is a caption this is a 
           caption this is a caption
     </span>
</div>

http://jsfiddle.net/6eosgzr0/

Answer 1

你可以在这样的表中做到这一点

<table>
    <tr>
        <td><img src="http://www.thetimes.co.uk/tto/multimedia/archive/00309/108787995_309592c.jpg" alt="cat" /></td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste iure eum quidem dolore dignissimos neque molestias velit praesentium minima architecto voluptas suscipit excepturi tempore accusantium aperiam beatae culpa quaerat vero.</td>
    </tr>
</table>

img {
    width: 100%;
}

http://jsfiddle.net/j58nns7k/

但那将是非常无意义的。我会推荐新的HTML5元素图和figcaptions：

<figure>
    <img src="path/to/image" alt="alt text" />
        <figcaption>Caption</figcaption>
</figure>

并将最大宽度设置为父div。

Answer 2

在CSS中设置如下的样式。

div {
   margin: 50px;
   padding: 10px;
   border: 1px solid black;
   display: table;
}
span {
   display: table-caption;
   caption-side: bottom;
}

点击此链接

jsfiddle

标题图像，但不在父div上设置固定宽度

2 个答案: