正确显示图像内嵌与不同大小的div

Question

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

这是我的尝试：

HTML：

location ~ "/api/(?P<arg1>[^/]+)/(?P<arg2>[^/]+)/$" {

    rewrite "^.*$" /api/index.php?arg1=$arg1&arg2=$arg2;

}

CSS：

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

（https://codepen.io/anon/pen/QqwoPV）。我的方法是使用时间戳向.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%; } 添加border-bottom，然后在<p>之后放置图像，通过调整顶部和顶部的数字使其显示在边框的末尾对。我只能通过一遍又一遍地改变数字才能成功地做到这一点，直到它最终到达正确的位置。是否有一种聪明的方式来定位心脏图像而不是做我做过的事情？当您尝试创建不同大小的响应框时，这将非常有用。

Answer 1

只需放置图像（在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>