显示不同尺寸的内嵌正确div的图像
问题描述:
我想使用CSS创建下面的框类型。由于我是CSS的新手,我最大的担忧是创建标题,因此无论盒子的大小如何,分隔线在心脏图像之前都有一点距离。显示不同尺寸的内嵌正确div的图像
这是我的尝试:
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>
我不知道Calc功能,这是真正有用的:)谢谢 – John