Html 如何在粘贴的图像周围放置文本：before？

我正在制作一个带有图像和一些文字的块，但我的布局不起作用。我尝试了

float:left

，但图像仍然高于文本。可能是因为我主要使用flexbox，所以有些东西不起作用

以下是HTML：

<div class="info info-1">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p>
</div>

希望有人知道怎么回事。

.info{
光标：指针；
背景：浅灰色；
利润率：10px 15px；
溢出：隐藏；
显示：-网络工具包盒；
-webkit线夹：3个；
-网络工具包盒方向：垂直；
}
.info p{
边际：0px；
字体大小：正常；
字体大小：12px；
位置：相对位置；
}
.info p:n类型（1）{
左侧填充：55px；
}
.info p:n类型（1）：之前{
内容：''；
位置：绝对；顶部：50%；左侧：0；
利润上限：-25px；
背景：url（“http://cs604323.vk.me/v604323026/18bef/a_V9CFM-iRU.jpg");
宽度：50px；
高度：50px；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。在nisi ligula中的PROI是一个蜗壳，它位于amet、mattis和dui之间。努克·阿库姆桑·奥奇·卢克图斯蓄积门。同侧相位，非菱形相位，直截了当。Nam sed ipsum a lacus sodales eleifend。猫科动物前庭，前庭元素菱形，口头禅。纳拉姆·维尼纳提斯，饮食中的精英，奥奇·珀鲁斯·波苏尔·莫里斯，奎斯·阿迪皮斯姆·乌尔纳·阿卡姆

或@dmitry谢谢！

.info {
  cursor: pointer;
  background: lightgrey;
  margin: 10px 15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.info p {
  margin: 0px;
  font-weight: normal;
  font-size: 12px;
}

.info p:before {
  content: url("http://cs604323.vk.me/v604323026/18bef/a_V9CFM-iRU.jpg");
}