html - 如何在 :before? 粘贴的图像周围放置文本

Question

我正在制作一个带有图像和其后一些文本的 block ，但我的布局不起作用。我正在尝试 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>

和CSS:

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

希望有人知道出了什么问题。

Answer 1

.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;  
  position: relative;
}
.info p:nth-of-type(1){
  padding-left: 55px;
}
.info p:nth-of-type(1):before {
  content: '';
  position: absolute; top: 50%; left: 0;
  margin-top: -25px;
  background: url("http://cs604323.vk.me/v604323026/18bef/a_V9CFM-iRU.jpg");
  width: 50px;
  height: 50px;
}

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