Question

我遇到绝对定位DIV的问题。它位于图像的右侧，在它下面是另一个DIV。在全屏，它看起来很好，但当我调整浏览器窗口的大小时，文本进入底部DIV。我只是希望浏览器创建一个滚动条，以便文本可以水平继续。这是我在Jfiddle的问题：

您必须调整浏览器的宽度以查看问题

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;
}

Answer 1

这是因为这个位置是绝对的我会使用float而不是为此定位。查看我的Fiddle。

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

Answer 2

FIDDLE DEMO

你不需要对#d2,#d3做任何事情。您所要做的就是将float:left应用于包含图像的d1！

文本流入另一个DIV元素

2 个答案: