html - 正确显示不同尺寸的div内联图像

我想使用CSS在下面创建框的类型。由于我是CSS的新手，所以我最大的担心是创建标头，以便无论框的大小如何，分隔线在心脏图像之前都有一点缝隙。



这是我的尝试：

HTML：

<div class="block">
  <p><em>04-05</em></p>
  <img class="block_pic" src="..."/>
</div>

CSS：

.block {
  border: solid red;
  width:250px;
  height:150px;
 }

p{
 border-bottom:solid black 2px;
 width:83%;
 margin:5px;
}

.block_pic {
  width:30px;
  position:absolute;
  top: 5.5%;
  right:86.5%;
}

（https://codepen.io/anon/pen/QqwoPV）。我的方法是将带有时间戳的border-bottom添加到<p>，然后使用position:absolute放置图像，然后通过调整顶部和右侧的数字使其出现在边框的末端。我只能通过一遍又一遍地更改数字来成功地做到这一点，直到最终将其放置在正确的位置。有没有一种聪明的方法来定位心脏图像而不是做我所做的事情？当您尝试创建不同大小的响应框时，这将很有用。

最佳答案

只需将图像放在第一位（在p元素之前）并在其上使用float: right。并使用calc作为p标签宽度，如下所示：

https://codepen.io/anon/pen/MEYRVY

.block {
  border: solid red;
  width:250px;
  height:150px;
 }

p{
 border-bottom:solid black 2px;
 width: calc(100% - 45px);
 margin:5px;
}

.block_pic {
  width:30px;
  float: right;
  margin: 5px;
}

<div class="block">
  <img class="block_pic" src="..."/>
  <p><em>04-05</em></p>
</div>