標題的圖像，但沒有設置一個固定寬度的父div

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元素figure和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