CSS：圖像下方的文本不會破壞到新行

我有一個絕對定位的div。在這個div裏面有一個圖像，在它下面有一個標題。現在，如果字幕達到圖像寬度的95％，現在我想讓字幕突破新的一行。CSS：圖像下方的文本不會破壞到新行

但我無法讓它工作。文本（無論我說什麼寬度）總是將圖像向左移動，就像它沒有間斷。

我給這個小提琴： http://jsfiddle.net/hw7t7xyn/1/

的圖像設置爲

right: 0; 
top: 10px;

但因爲文本太長，它移動到左側。

另外div.caption似乎不採用父母的div寬度。

有人可以幫我嗎？也許這是HTML設置或CSS的問題，我不知道了，但它讓我瘋狂。

更新：對不起，我忘了提及，我不知道圖像的尺寸。有沒有可能的方式來做到這一點沒有JavaScript？

來源

2014-09-04 Johannes Klauß

你正在努力使圖像寬度的文本95％，但其設置到div寬度的95％...爲什麼不在px中指定標題的寬度（即0.95 * 260 = 247px）？ – rnevius 2014-09-04 10:16:52

看到有問題的更新 – 2014-09-04 10:24:40

我想你只需要添加一個寬度到主div（絕對定位的那個）。

我加的260px寬（相同圖像）

當我這樣做，它對準格到最右邊，你有right:0px這是正確的？

http://jsfiddle.net/hw7t7xyn/5/

來源

2014-09-04 10:14:28 Lee

div.photo-wrap { 
    overflow: hidden; 
    position: absolute; 
    text-align: left; 
    width:260px; 
} 

img.photo { 
    position: relative; 
    display: block; 
} 

div.caption { 
    margin-top: 7px; 
    width: 95%; 
    position: relative; 
    display: inline-bock; 
}

給予寬光包裝

來源

2014-09-04 10:15:06 himanshu

CSS：圖像下方的文本不會破壞到新行

回答

相關問題