內嵌圖像不會在溢出換行符下移

Question

我的內嵌圖像是使用內嵌的position:absolute（我無法使用其他內聯方法，因爲它們會導致行高改變。）這些圖像流出div併發送到下一行...但圖像不下降..它被髮送到下一行意味着它被髮送到div的最左側，但它不下移在高度，所以它幾乎就像它停留在同一條線上，但向左移動？我怎樣才能解決這個問題？

實施例：（*從30PX最後TWO圖像的寬度更改爲150像素看我所描述的效果。）http://jsfiddle.net/ztKP5/2/

---

代碼：（*改變最後的寬度二圖片來自30像素到150像素，看看我所描述的效果。）

<div style="font: 30px; border:1px solid black; width: 350px; height:350px; word-wrap: break-word;"> 

<font face='helvetica'> 

Test test test test test test test test test test test test test test test test!! 

<img src='http://home.comcast.net/~urbanjost/images/globe_west_2048.jpg' style='width: 100px; height: 75px; position:absolute;'> 
<img src='' style='width:100px; height:2px;'> <!-- this is a spacer--> 

<img src='http://home.comcast.net/~urbanjost/images/globe_west_2048.jpg' style='width: 30px; height: 75px; position:absolute;'> 
<img src='' style='width:30px; height:2px;'> <!-- this is a spacer--> 


</font> 

</div> 

Answer 1

中包裝絕對在一個div這是display:inline-block（... NOTdisplay:inline）定位圖像固定的問題。

添加一個額外的「！」在「測試」後看到文字：http://jsfiddle.net/Z9rzx/2/

或者添加一個額外的「！」在下面的源代碼中的「測試」文本後，看到圖像轉到下一行：

<!--The second and fourth images are just spacers so that the next text, or image, or whatever will appear after the absolutely positions image instead of behind it... I could have used an in-line div or a span or anything...--> 


<div style="font: 30px; border:1px solid black; width: 350px; height:350px; word-wrap: break-word;"> 

<font face='helvetica'> 

Test test test test test test test test test test test test test test test test!!!!!!!! 

<div style="width:100px; display:inline-block;"> 
    <img src='http://home.comcast.net/~urbanjost/images/globe_west_2048.jpg' style='width: 100px; position:absolute;'> 
    <img src='' style='width: 100px; height:2px;'> 
</div> 

<div style="width:100px; display:inline-block;"> 
    <img src='http://home.comcast.net/~urbanjost/images/globe_west_2048.jpg' style='width: 100px; position:absolute;'> 
    <img src='' style='width: 100px; height:2px;'> 
</div> 

test tast test test test test test test test test test test 


</font> 

</div> 

Answer 2

我沒有看過這個跨瀏覽器，但在Firefox的作​​品。 http://jsfiddle.net/digitalagua/NeX4A/

<style> 
.holder { 
    font-size: 16px; 
    font-family:Helvetica,Arial,sans-serif; 
    border:1px solid black; 
    width: 350px; 
    height:350px; 
    word-wrap: break-word; 
    display:inline-block; 
} 

.floater { 
    width: 150px; height: 75px;margin-bottom:-63px; 
} 
<style> 

<div class="holder"> 

Test test test test test test test test test test test test test test test test!! 

<img src="http://home.comcast.net/~urbanjost/images/globe_west_2048.jpg" class="floater"> 
Test test test test test test test test test test test test test test test test!! 

<img src="http://home.comcast.net/~urbanjost/images/globe_west_2048.jpg" class="floater"> 
Test test test test test test test test test test test test test test test test!! 

</div>