CSS代码

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

上面是固定宽度的外框代码；

如果要瀑布式自适应的宽度，则需添加下面css代码：

		.ka_pian_men a{
		flex-grow: 1;
		min-height:30px;
		}

如果让所有名片都居中，则需要添加下面css代码：

	justify-content:center;

还有圆形头像特效代码

  <!--圆形头像特效-->
<style>
  .my_img {
	  box-shadow: 0px 0px 2px 2px rgb(23 162 184 / 1%);
    padding: 1px;
    border-radius: 50% !important;
  }
</style>
  <!--圆形头像特效-->

以下是名片代码

<div class="ka_pian_men" style:display: flex;>
<!--名片开始了-->
<a class="d-inline-block text-auto border p-2 pl-3 pr-3 m-2 rounded category" data-placement="bottom" href="#" style=width:300px>
            <div class="float-center">
                <span class="small text-black-50">
<table style="margin-left: 1px; margin-right: -10px;">
        <tr>
            <td>
                <!--左侧内容-->
<img src='https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/11/17/133402_202824_m.png' width=50 class="my_img">
                <!--左侧内容-->
            </td>
            <td>
                <!--右侧内容-->
<i class="fas fa-star" style='color:#FFF'></i><i class="fas fa-star" style='color:#FF9050'>
<div><i class="fas fa-star" style='color:#FFF'></i>瓜皮之牙</div>
                <!--右侧内容-->
            </td>
        </tr>
</table>
                </span>
            </div>
            <div class="m-2">
自从用了Quicker这款软件，我每天都用它一键吃饭，妈妈再也不用担心我会饿肚子了。饱嗝……
            </div>
</a>
<!--名片结束了-->
</div>

为了以后方便添加星星SVG图标，也顺便在此备份一下。

<i class="fas fa-star" style='color:#FF9050'></i>
<i class="fal fa-star" style='color:#FF9050'></i>

感谢 darcyc 大佬的代码指导！！！