Html 为不同大小正确显示与div内联的图像

我想使用CSS创建下面的框类型。因为我是CSS的新手，所以我最关心的是创建标题，这样无论盒子大小，分隔线在心脏图像之前都有一点间隙

这是我的尝试：

HTML:

---

（）。我的方法是在带有时间戳的

中添加一个

边框底部

，然后放置一个带有

位置：绝对

的图像，通过调整顶部和右侧的数字使其显示在边框的末尾。我只能通过一遍又一遍地改变数字来成功地做到这一点，直到它最终到达正确的位置。有没有一种聪明的方法来定位心脏图像而不是像我这样做？当您尝试创建不同大小的响应框时，这将非常有用。

只需先放置图像（在

p

元素之前），然后使用

float:right

。并对

p

标签宽度使用

calc

，如下所示：

.block{
边框：纯红；
宽度：250px；
高度：150像素；
}
p{
边框底部：纯黑2px；
宽度：计算（100%-45px）；
保证金：5px；
}
.图块{
宽度：30px；
浮动：对；
保证金：5px；
}

04-05

只需将图像放在第一位（在

p

元素之前），并在其上使用

float:right

。并对

p

标签宽度使用

calc

，如下所示：

.block{
边框：纯红；
宽度：250px；
高度：150像素；
}
p{
边框底部：纯黑2px；
宽度：计算（100%-45px）；
保证金：5px；
}
.图块{
宽度：30px；
浮动：对；
保证金：5px；
}

04-05

我不知道calc函数，这非常有用：）谢谢我不知道calc函数，这非常有用：）谢谢

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

.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%;
}