定位文本和图像

Question

如何定位30px宽度和30px高度的图片旁边有2条线，以便这两条线在30px高度内也可以适合一个在另一个之上？

我已经安装了引导程序，如果它可以帮助。

<p> 
    <img src='pic1.png' width='30' height='30'/> <a href='#'>E"nola Kuhic (wiu)</a> 
    person 
</p> 

Answer 1

考虑使用自举的media object。

<div class="media"> 
    <div class="media-left"> 
    <a href="#"> 
     <img class="media-object" src="..." alt="..."> 
    </a> 
    </div> 
    <div class="media-body"> 
    <a href="..." class="media-heading">E"nola Kuhic (wiu)</a> 
    person 
    </div> 
</div> 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="media"> 
 
    <div class="media-left"> 
 
    <img class="media-object" src="https://placehold.it/40x40"> 
 
    </div> 
 
    <div class="media-body"> 
 
    <a href="#" class="media-heading">E"nola Kuhic (wiu)</a> 
 
    <div>person</div> 
 
    </div> 
 
</div> 
 

 

 
<div class="media"> 
 
    <div class="media-left"> 
 
    <img class="media-object" src="https://placehold.it/40/AFA"> 
 
    </div> 
 
    <div class="media-body"> 
 
    <a href="#" class="media-heading">John Doe</a> 
 
    <div>admin</div> 
 
    </div> 
 
</div>

Answer 2

<p> 
    <img src='pic1.png' width='30' height='30' style='float:left;'/> 
    <a href='#'>E"nola Kuhic (wiu)</a><br /> 
    person 
</p>