论坛 › 表格设计院 › 宫格头像简代码

屿风 发表于 2026-8-27 10:41:02

宫格头像简代码

<style>
.attach-col5 {
column-count:4;
column-gap:12px;
max-width:800px;
margin:12px auto;
}
.attach-col5 a {
display:block;
border-radius:12px;
overflow:hidden;
}
.attach-col5 img {
width:99%;
height:auto;
display:block;
margin-bottom:12px;
break-inside:avoid;
border-radius:8px;
}
@media(max-width:1000px){.attach-col5{column-count:3;}}
@media(max-width:640px){
.attach-col5{column-count:2;column-gap:4px;max-width:100%;}
.attach-col5 img{width:100%;}
}
</style>
<div class="attach-col5">



</div>

屿风 发表于 2026-8-27 10:42:35

<style>
.attach-col5 {
column-count:4;
column-gap:8px;
max-width:800px;
margin:12px auto;
}
.attach-col5 a {
display:block;
border-radius:12px;
overflow:hidden;
}
.attach-col5 img {
width:99%;
height:auto;
display:block;
margin-bottom:12px;
break-inside:avoid;
border-radius:8px;
}
@media(max-width:1000px){.attach-col5{column-count:3;}}
@media(max-width:640px){
.attach-col5{column-count:2;column-gap:4px;max-width:100%;}
.attach-col5 img{width:100%;}
}
</style>
<div class="attach-col5">

《图片位置》

</div>

屿风 发表于 3 天前

<style>
.attach-col5 {
column-count:3;
column-gap:8px;
max-width:800px;
margin:12px auto;
}
.attach-col5 a {
display:block;
border-radius:12px;
overflow:hidden;
}
.attach-col5 img {
width:99%;
height:auto;
display:block;
margin-bottom:12px;
break-inside:avoid;
border-radius:8px;
}
@media(max-width:1000px){.attach-col5{column-count:3;}}
@media(max-width:640px){
.attach-col5{column-count:2;column-gap:4px;max-width:100%;}
.attach-col5 img{width:100%;}
}
</style>
<div class="attach-col5">

《图片位置-适合21张平分图》

</div>

查看完整版本: 宫格头像简代码