html - 定位文字和图像

如何放置宽度为30px，高度为30px的图片，并在其旁边放置2条线，以便这两行在30px高度之内也可以彼此重叠？



如果可以，我已经安装了Bootstrap。

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

最佳答案

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

关于html - 定位文字和图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41336331/