示例:卡片按钮(一)
完全自适应屏幕分辨率,放不下了就自动换行; 图片也设置了限定最大高宽,超出或者不够都会自动适应框内,不会留白和超出; 感谢 CL 的自动换行框架,感谢 darcyc 的图片限定 CSS 代码。
<style>
.ka_pian_men {
display: flex;
flex-wrap: wrap;
margin-bottom: 5px;
}
</style>
<style>
.my_img {
box-shadow: 0px 0px 2px 2px rgb(23 162 184 / 35%);
padding: 5px;
border-radius: 2% !important;
height:300px;
width:200px;
object-fit: cover;
}
</style>
<div class="ka_pian_men" style:display: flex;>
<!----------------------------->
<div class="card border-0" style=margin-bottom:20px>
<div><button id="btnCopyToClipboard" class="btn btn-link">
<a href="网址链接" target="_blank">
<img src='https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/04/124803_202824_no.png' class='my_img no-lity'>
</a></button></div>
<div align="center">
<a class="btn btn-info btn-sm" href="AAA" target="_blank" role="button">暂无信息 <span class="badge badge-light">0</span></a>
</div>
</div>
<!----------------------------->
<div class="card border-0" style=margin-bottom:20px>
<div><button id="btnCopyToClipboard" class="btn btn-link">
<a href="网址链接" target="_blank">
<img src='https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/04/124803_202824_no.png' class='my_img no-lity'>
</a></button></div>
<div align="center">
<a class="btn btn-info btn-sm" href="AAA" target="_blank" role="button">暂无信息 <span class="badge badge-light">0</span></a>
</div>
</div>
<!----------------------------->
</div>