divの重複を防止する

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を持つようにしたいようだとテキストラッピング？

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

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

Answer 2

clasic答えはfloatを使用することです。この

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

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

Answer 3

を試してみてください。ポジションを使用する理由はありますか？絶対ですか？

また、要素の順序と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>