文字滲入另一個DIV元素

我有一個絕對定位DIV的問題。它位於圖像的右側，下方是另一個DIV。在全屏時，它看起來很好，但是當我調整瀏覽器窗口的大小時，文本會進入底部的DIV。我只想讓瀏覽器創建一個滾動條，以便文本可以水平繼續。這是我對Jfiddle問題：文字滲入另一個DIV元素

http://jsfiddle.net/9hpVT/

你必須調整瀏覽器的寬度，看問題

HTML

<div> 
    <div id="d1"> 
     <img src="abc.jpg" /> 
    </div> 
    <div id="d2">Here is a long line of text that will overlap the bottom portion I do not want it to do this because it is very bad for my design. Someone please help me out!</div> 
    <div id="d3">I don't want to be interrupted!</div> 
</div>

CSS

#d1 { 
    left:0; 
    top:0; 
} 

#d2 { 
    position:absolute; 
    left:50px; 
    top:0px; 
}

來源

2014-02-09 hurtbox

＃d1，＃d2 {float：left;}修復此問題。 –

@VijayakumarSelvaraj不，它不會，這將是可怕的只有＃D1應該漂浮。試試看。 –

發生這種情況是因爲該位置是絕對的。
我會使用float而不是爲此定位。請參閱我的Fiddle。

#d1 { 
    float: left; 
} 
#d2 { 
    margin-left: 50px; 
}

來源

2014-02-09 09:02:14

非常感謝您的幫助。你是對的:) – hurtbox

FIDDLE DEMO

你不需要用#d2,#d3做任何事情。您只需將float:left應用於包含圖像的d1即可！

來源

2014-02-09 09:10:27

看起來更好一些'margin-right：20px;' –

TRUE :)然後我們還可以添加margin-left：100px（因爲圖片本身的寬度是80px）。這在技術上應該是距離每一邊20px。 –

文字滲入另一個DIV元素

回答

相關問題