Yevhenii Zhdan Yevhenii Zhdan - 6 months ago 14
CSS Question

How to place text around image which is pasted by :before?

I am making a block with image and some text after it but my layout is not working. I was trying

float:left
, but image is still upper than text. Maybe something is not working because I am using flexbox mostly?

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


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


Hope someone knows what is wrong.

Answer

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

Comments