文字环绕遥远的元素

Question

问题

我尝试通过设置较大的边距来创建位于其他链接DOM元素一侧的动态信息元素。但是，我遇到了一个小问题，因为位于包含div内部的p元素内的文本正在前面div中的文本中流动，尽管它们实际上并不是彼此相邻。

Fiddle问题。

我发现我可以通过使前面的

元素位置绝对来防止这种情况，但是这会出现问题，因此，如果有更好的方法来防止这个问题呢会更加理想。

HTML

---

<br>
<br>
<p id="problem">Text which will cause word wrap.</p>
<div id="container">
    <p>Text which is being wrapped around the text, despite the fact that the text is not nearby</p>
</div>

CSS

---

#problem {
    display: block;
    float: left;
    height: 16px;
    line-height: 16px;
    margin-bottom: 0px;
    margin-top: 2px;
    width: auto;
}
#container {
    background-color: rgb(255, 150, 150);
    display: block;
    font-size: 14px;
    height: 188px;
    left: 220px;
    margin-left: 15px;
    margin-top: -25px;
    padding: 4px;
    position: relative;
    top: -22px;
    width: 200px;
}
#container p {
    color: rgb(216, 0, 12);
    display: block;
    font-size: 14px;
    height: 96px;
    line-height: 16px;
    margin: 0;
    width: 200px;
}

修改：更新了fiddle更多背景信息。

Answer 1

包装{

margin-top: 60px;

}

内容{

background-color: #BBBBBB;
width: 300px;

}

内容输入{

float: right;

}

问题{

display: block;
float: left;
height: 16px;
line-height: 16px;
margin-bottom: 0px;
margin-top: 2px;
width: auto;

} 。控制 {     身高：30px;     宽度：自动; }

容器{

background-color: rgb(255, 150, 150);
display: block;
font-size: 14px;
height: 188px;
left: 300px;
margin-left: 15px;
padding: 4px;
position: absolute;

width: 200px;

}

容器p {

color: rgb(216, 0, 12);
display: block;
font-size: 14px;
height: 96px;
line-height: 16px;
margin: 0;
width: 200px;

}