Question

在下面（https://jsfiddle.net/9cc2xvbs/）中，如何防止文本重叠或包装文本内容。

风格

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 

div.absolute {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

体：

<div class="relative"><p>This div element has position: relative;<p>
  <div class="absolute"><p>This div element has position: absolute;<p></div>
</div>

Answer 1

似乎你想在div里面有一个div，绿色内部 div在右边，而文本包裹在哪里？< / p>

＆＃13;

.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 

.absolute2 {
    width: 190px;
    display: inline-block;
    height: 100px;
    border: 3px solid #73AD21;
}
.absolute1 {
    width: 50%;
    display: inline-block;
    height: 100px;
}

＆＃13;

<div class="relative">
  <div class="absolute1">
    <p>This is some text that should wrap around the second div as there are now two DIVs in the parent div</p>
  </div>
  <div class="absolute2">
    <p>This is some text that should wrap around the second div as there are now two DIVs in the parent div</p>
  </div>
  </div>

＆＃13;

Answer 2

试试这个

＆＃13;

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100px;
  border: 3px solid #73AD21;
}

.first{
  width:50%;
  display:inline-block;
}

＆＃13;

<div class="relative">
  <p class="first">
    This div element has position: relative;
  <p>
  <div class="absolute">
    <p>This div element has position: absolute;
    <p>
  </div>
</div>

＆＃13;

Answer 3

clasic的答案是使用浮动。有没有理由使用position：absolute？

您还需要更改元素和innerHTML的顺序：

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 

div.absolute {
    float: right;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

<div class="relative">
  <div class="absolute"><p>This div element is floated right<p></div>
  <p>This div element has position: relative;<p>
</div>

防止div

3 个答案: