介绍 & lt; meta name=皏iewport",内容=翱矶?750,user-scalable=不,target-densitydpi=device-dpi viewport-fit=cover"在
.grid-img {/* *
宽高
1. 3 n + 1且是倒数第2张时
2. 3 n + 1且是最后一张时
以上两种情况图片的宽高均应为320;
剩余两种情况是:
3.只有一张时宽高320;
4. 其余的情况和索引宽高都为220;
*/显示:inline-block;
宽度:220 px;
身高:220 px;
&:{独生子女
宽度:320 px;
身高:320 px;
}
&:nth-child (3 n + 1): nth-last-child (2),
&:nth-child (3 n + 2):胎{
宽度:332 px;
身高:332 px;
}/* *
间距/布的局
*/&:nth-child (3 n + 2) {
保证金:0 6 px;
}
&:nth-child (n + 4) {
margin-top: 6 px;
}
&:第一个孩子{
border-top-left-radius: 10 px;
}
&:胎{
margin-right: 0;
border-bottom-right-radius: 10 px;
}/* *
圆角
*///左下圆角:最后一行第一个
&:nth-child (3 n + 1) {
&:胎,
&:nth-last-child (2),
&:nth-last-child (3) {
border-bottom-left-radius: 10 px;
}
}//处理四个布的局//增大第二个保证金讲第三个挤到下一行
&:nth-child (2): nth-last-child (3) {
margin-right: 220 px;
}//重置第二个圆角
&:nth-child (2): nth-last-child (3) {
border-top-right-radius: 10 px;
}//重置第三个的保证金和半径
&:nth-child (3): nth-last-child (2) {
margin-top: 6 px;
margin-right: 6 px;
border - radius: 0 0 0 10 px;
}//重置第4个的圆角
&:nth-child(4):胎{
border - radius: 0 0 10 px 0;
}
} 这篇文章给大家分享的是有关CSS怎样实现动态图片的九宫格布局的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
前提条件:<代码>内容=翱矶?750,
效果图如下:
![CSS怎样实现动态图片的九宫格布局”>,</p> <p> <强>需求分析</强> </p> <p>高宽:</p> <p> 1张图【宽320,高320】[2倍稿尺寸]<br/> 2张图时【宽332,高332】<br/> 3张图,4张图,6张图,7张图,9张图时【宽220,高220】<br/> 5张图,8张图时【第4,第5张宽高332】,【其余220】</p> <p> <强>间距:</强> </p> <p> 2张时,【最后一张】只留下方有向边缘<br/> 3张时,【第2张】左右缘<br/> 4张时,【第2张】和【最后一张】都只剩下有方向的,【3 - 4】有顶尖的方向的保证金<br/> 5张时,【最后一张】只留下方有向边缘<br/> 6张,7张时,【第2张,第4张】有左右,从【第4张起】前有8张<br/>时,【第2张,第4张】时左右,从【第4张起】有,【最后一张】只剩下有<br/> 9张时,【第2张,第4张,第8张】有左右缘</p> <p> <强>圆角10:<br/> </强> </p> <p> 1张图时【都有】圆角<br/> 2张图时,3张图-【第1张左上,左下】,【最后一张右上,右下】<br/> 4张图时【第1张左上】,【第2张右上】,【第3张左下】,【最后一张右下】<br/> 5张图时【第1张左上】,【第3张右上】,【第4张左下】,【最后一张右下】<br/> 6张图时【第1张左上】,【第3张右上】,【第4张左下】,【最后一张右下】<br/> 7张图时【第1张左上】,【第3张右上】,【第7张左下,右下】<br/> 8张图时【第1张左上】,【第3张右上】,【第7张左下】,【最后一张右下】<br/> 9张图时【第1张左上】,【第3张右上】,【第7张左下】,【最后一张右下】</p> <p> <强>归纳法<br/> </强> </p> <p>大家在中学的时候都学过数学的归纳法,就是一个命题先求出n=1的时候成立,然后假设n=k成立,证明n=k + 1也成立,从而证得命题在【k=n=k任意实数】的时候都成立。</p> <p>代码</p> <pre类=](/zixun/d/file/jishu/2021-06-10/a3ada24d536a31807ed90924f18f9578.jpg )
& lt; div 类=癵rid-img-box"比;
,,,& lt; van-image 类=& # 39;grid-img& # 39;, v=皏alue data.photo",拷贝:关键=皏alue",,适合=癱over", https://www.yisu.com/zixun/: src=" value "/>
感谢各位的阅读!关于“CSS怎样实现动态图片的九宫格布局”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
