显示不同尺寸的内嵌正确div的图像

Question

我想使用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之后放置图像，使其显示在边框的末端，方法是调整顶部和右侧的数字。我只能一次又一次地改变这些数字，直到它终于在正确的地方结束。有没有一种聪明的方式来定位心脏图像，而不是做我所做的事情？当您尝试创建不同大小的响应框时，这会很有用。

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>