定位文本和圖像

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>