文本内部未与CSS重叠的图像

Question

我需要在文本中放置一个图像，但图像不应该覆盖文本。

这就是我想要实现的目标：

这是我用过的HTML结构：

    <div class="fascia__desc">
        <img src="img/tmp/test.png" alt="">
        <p>Quisque posuere tempus varius. Mauris eros tortor, sollicitudin non sem id, volutpat fermentum diam. Fusce tempor elit ac pretium pulvinar. Donec lacinia, lacus vel tempus porta, metus velit elementum risus</p>
    </div>

这就是CSS：

.fascia__desc img{position: absolute; left: 33.5%; top: 30%;}
.fascia__desc { padding:50px 0; position:relative; }
.fascia__desc p { max-width:610px; margin:0 auto; text-color:#000000; text-align:center; }

但是，当我调整窗口大小时，网站应该响应，图像移动到文本上方，这不是我想要的。有人能指出我正确的方向吗？

Answer 1

  

的CSS：

  .fascia__desc img{position: relative;margin:5px;float:left}
    .fascia__desc { padding:50px 0; position:relative; }
    .fascia__desc p { max-width:610px; margin:0 auto; text-color:#000000; text-align:justify; }

  

HTML：

<div class="fascia__desc">
      <p>
         Quisque posuere tempus varius. Mauris eros tortor, sollicitudin non sem     id, volutpat fermentum diam.

    <img src="paper.gif" alt="">

      Fusce tempor elit ac pretium pulvinar. Donec lacinia, lacus vel tempus    porta, metus velit elementum risus
      Fusce tempor elit ac pretium pulvinar. Donec lacinia, lacus vel tempus porta, metus velit elementum risus
      </p>
</div>