如何调整图像周围的文字以避免重叠

Question

IMAGE OF THE PROBLEM 结果是这样的。我希望文字不要与图像重叠。

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

这里是一个jsfiddle

有关详细信息谷歌 '浮动' 的CSS属性。