HTML5圖片標題：圖片移至下一行

我正在嘗試創建圖片庫。爲了顯示我用下面的代碼HTML5圖片標題：圖片移至下一行

<div> 

<figure> 
<img src="sample-image.png" /> 
<figcaption>Caption Here</figcaption> 
</figure> 

</div>

我的圖片下方的字幕現在的問題是，當我運行庫頁的圖片看起來像如下（如圖1）。第二張圖片出現故障。我想顯示如圖2所示的圖像，但我不知道要爲此編寫什麼CSS代碼或如何修復它。你能請你幫忙嗎？

感謝提前:)

enter image description here

來源

2012-03-02 black_belt

基本上只是設置display: inline-block; white-space: normal;的身材和white-space: nowrap;到他們的父（假設你的數據被包裹在一個共同的容器）

然後，你將需要一些使用其他屬性的小調整（如vertical-align）

看到這個例子小提琴：http://jsfiddle.net/CDkNV/

來源

2012-03-02 14:20:25 fcalderan

感謝您的回覆。請檢查這個鏈接。我在這裏粘貼了我的代碼。 http://jsfiddle.net/SxWbD/4/謝謝:) – 2012-03-02 14:40:36

你的jsfiddle HTML是錯誤的，它應該是一個數字'

'標記，'

'是最後一個孩子。有了這個，'圖顯示：行內塊; ''就地，事情對我來說很好。檢查http://jsfiddle.net/9UQJY/1/ – 2012-03-02 14:51:29

下面是一個JSFiddle，我認爲這與Fabrizio的評論一致：http://jsfiddle.net/nJhwa/1/。有一點需要注意，如果你沒有在你的'figure'容器上設置寬度，一個長的標題將會擴展容器，如果足夠長的話，使'figure'容器包裝到下一行。設置一個特定的寬度（與'img'相同）將包裝標題文本。將'vertical-align：top'應用於'figure'應該使它們看起來不錯。 – jmbertucci 2012-03-02 14:55:54

HTML5圖片標題：圖片移至下一行

回答

相關問題