文字渗入另一个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元素

回答

相关问题