オーバーラップを避けるために画像の周りのテキストを調整する方法

Question

結果はこれです。画像と重ならないようにしてください。

あなたがやろうとするものにはほとんど不明で

Answer 1

が、私は、z-indexが動作すると思う：

  <div class="container-fluid" id="circle_div"></div> 

      <div class="container" id="div"> 
       <div class="container box"><h3>Apple</h3> 
        <div id="box1"></div> 
        <p class="mytext">Lorem Ipsum ...Lorem Ipsum.</p> 

       </div> 
       <div class="container box"><h3>Orange</h3> 
        <p class="mytext">Lorem Ipsum ...Lorem Ipsum.</p> 
       </div> 
       <div class="container box"><h3>Banana</h3> 
        <p class="mytext">Lorem Ipsum ...Lorem Ipsum.</p> 
       </div> 
       <div class="container box"><h3>Mango</h3> 
        <p class="mytext">Lorem Ipsum ...Lorem Ipsum.</p> 
       </div> 
      </div> 

      <style> 
       .mytext{ 
        z-index:1000 
       } 
      </style> 

Answer 2

私はあなたがあなたのイメージを配置する方法がわかりません。しかし、CSSの 'float'プロパティを使用してイメージの周りに折り返しテキストを得ることができます。

HTML：

<div id="container"> 
    <img src="http://images.all-free-download.com/images/graphiclarge/natural_beauty_highdefinition_picture_166133.jpg"/> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi.</p> 
</div> 

のCss：

img { 
    float: left; 
    margin: 0 20px 20px 0; 
    width: 160px; 
    height: 150px; 
} 

p { 
    text-align: justify; 
    text-indent: 2em; 
} 

ここでは詳細CSSのGoogleのフロート 'プロパティについてはjsfiddle

です。