效果如下

感谢darcyc大佬的指导，让下部分的空白变得紧凑美观；
但是让文字居中并保持合理的间距又比较困难；
幸运的是，老大提供了一个入门HTML文档，随便尝试了一下其中的DD代码，竟然自动产生上下间距；
歪打正着，非常满意，下面是完整的CSS和HTML代码。
如果要文字居中并加粗的话，则将DD换成DT即可，如：【dt align="center"】暂无信息【/dt】

---

<div class="ka_pian_men" style:display: flex;><div class="card" style="width: 273px">
	<a href="Guide?id=7cedc9e0-d11c-4cce-b993-08d9b8bffc32&step=35b86293-76cf-48fd-8cef-08d9b8a344c1" target="_blank">
  <img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/06/220201_202824_1.jpg" class="my_img no-lity" alt="...">
		</a>
	  <div>
<dd align="center">给电影人的情书</dd>
</div></div></div>

<style>
	.ka_pian_men {
	display: flex;
	flex-wrap: wrap;
	margin: 3px;
	}
</style>

<style>
  .my_img {
    padding: 8px;
    border-radius: 1% !important;
	  height:180px;
    width:270px; 
    object-fit: cover;
  }
</style>

style里替换一下代码，会出现阴影特效，更加美观。
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);