Question

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

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

Answer 1

Path

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

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

如何在框周围显示文字？

3 个答案: