我有一个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/
最佳答案
好吧,你可以像这样在一张桌子上做
<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。