html - 定位文本和图像

Question

如何放置一张 30px 宽和 30px 高的图片，并在其旁边放置 2 行，以便这两行在 30px 高度内适合一条在另一条上方？

如果有帮助，我已经安装了 Bootstrap。

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

Answer 1

考虑使用 Bootstrap 的 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>