如何在框周围显示文本

Question

这是我的例子： http://jsfiddle.net/9y7d3124/1/，我正在尝试在右上角显示红色框，以及周围的文本，但是如果左侧框中有太多文本在下面移动，如果我为框文本设置绝对位置，则文本在框下方移动，文本是动态的，因为它无法通过边距或填充进行设置， 有人知道解决方案吗？这里是 html 代码：

<div class="left">asdfwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>
<div class=right></div>

Answer 1

.parent {
  overflow: hidden;
}
.right {
    margin: 0 0 15px 15px;
    width: 200px;
    height: 200px;
    background: red;
    float: right;
}

<div class="parent">
  <div class=right></div>
  <div  class="left">asdfwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwww</div>
</div>

Answer 2

向元素添加容器：

<div class="content">
    <div class="right"></div>
        <p>Some DescriptSome DescriptionSome DescriptionSome DSome DescriptionSome DescriptionSome DescriptionSome DescriptionSome DescriptionSome DescriptionSome DescriptionescriptionSome DescriptionSome DescriptionSome DescriptionSome DescriptionSome DescriptionSome DescriptionSome DescriptionSome DescriptionSome DescriptionSome Descriptionion</p>
    </div>

并使用以下 CSS：

.right{
    width: 200px;
    height: 200px;
    background: red;
    float: right;
}

.content {
  overflow:hidden;
}

Answer 3

JS 小提琴：http://jsfiddle.net/9y7d3124/5/

您可以使用隐藏的可变宽度div 的溢出。 注意左右div 的顺序，它是相反的。

<div class=right></div>
  <div  class="left">asdfwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>

.right{
    width: 200px;
    height: 200px;
    background: red;
    float:right;
}
.left {
  word-break: break-all;
  overflow:hidden;
}