將div寬度限制爲其內部流體圖像的寬度

晚上前端嚮導。我試圖做一些應該很簡單的事情：我想讓圖片在我的正文內容中正確或左移，每張圖片下方都有一個標題。爲了嘗試實現這一點，我將浮動div的圖像放在裏面，然後在下面添加一個標題。我給了圖像最大寬度100％，所以我的佈局是響應。將div寬度限制爲其內部流體圖像的寬度

有沒有什麼辦法只使用CSS和HTML，我可以將包含div的寬度限制爲圖像內部的寬度？我發現下面的跨度推出div的寬度，無論是顯示：inline-block還是不顯示。我希望跨度始終與圖像的寬度相同，因此文本將與圖像的右邊緣一致。

我希望能夠使用不同寬度的圖像，因此在div上設置最大寬度並不是真正的訣竅。我可以用JQuery輕鬆完成，但那會是作弊。

任何建議感激地收到！你可以看到我在說什麼在http://jsfiddle.net/andfinally/yBHjK/

來源

2012-02-05 And Finally

這聽起來像你想包含div擴大它的寬度只適用於img元素而不是span元素。那是對的嗎？

沒有純粹的CSS解決方案，JavaScript是達到目標的最佳方式。

兩個類似的問題：

來源

2012-02-05 20:59:07

謝謝Skottt，基本上我想讓標題文字在圖像的寬度處換行。歡呼聲爲我指出了其他問題：其中一個問題正在談論我正試圖解決的問題。它包含這個鏈接http://www.cs.tut.fi/~jkorpela/www/captions.html以對這個問題提出一個很好的概要。 – 2012-02-05 23:25:55

我確實看過那個鏈接，但它看起來與你想要做的有些不同。但是讓我們知道你是否找到了可行的方法。 – 2012-02-05 23:43:45

嘗試設置一個max-width到容器，然後width: 100%圖像。它應該工作。

看http://jsfiddle.net/nMEVd/1/

來源

2012-02-05 20:55:10 elclanrs

謝謝elclanrs。這是一個很好的解決方案。我也想這樣做 - 我希望有一種方法可以保持圖像的自然大小，但似乎沒有。通過skottt的回答得到了最多信息，但我也很感激你，所以給它一個高分，謝謝！ – 2012-02-05 23:32:31

你可能想嘗試添加：

style="word-wrap: break-word;"

的跨度elememt，或在CSS片材：

.image span { 
    word-wrap: break-word; 
}

編輯： 這應該打破span元素中的文本以適應兩行或更多行，而不是延伸過去你的圖片的寬度。

來源

2012-02-05 20:55:15

感謝Danny，當我第一次看到你的答案時，我哭了「尤里卡！」，但不幸的是，當我在JSFiddle和我的原始頁面上嘗試它時，跨度仍然沒有中斷。 – 2012-02-05 23:34:27

將div寬度限制爲其內部流體圖像的寬度

回答

相關問題