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


i making block image , text after layout not working. trying float:left, image still upper text. maybe not working because using flexbox mostly?

here html:

<div class="info info-1">       <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. proin nisi ligula, dapibus volutpat sit amet, mattis et dui. nunc porttitor accumsan orci id luctus. phasellus ipsum metus, tincidunt non rhoncus id, dictum lectus. nam sed ipsum 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 knows wrong.

.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 volutpat sit amet, mattis et dui. nunc porttitor accumsan orci id luctus. phasellus ipsum metus, tincidunt non rhoncus id, dictum lectus. nam sed ipsum 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

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -

java - Digest auth with Spring Security using javaconfig -