我有一个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。

09-17 17:22
查看更多