顯示不同尺寸的內嵌正確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>