最近隔壁美工小姐姐又给我找难题了,让实现以下功能,一张图居中,二张图平分,三张以上左浮动排列,据说是实现不了,所以让我切这个活动页面了,之前就总结《子选择器》过这个效果用css如何实现,今天再啰嗦一次。
![](https://i-blog.csdnimg.cn/blog_migrate/8c75d4fba68838a29dded7dab4fb75b2.jpeg)
实现效果:
CSS原理:
原理:first-child选择的是第一个元素, nth-last-child(n)选择的是从最后一个元素开始数的第n个元素,两者结合就碰撞出了以下结果
:first-child:nth-last-child(1) 选择只有一个元素的第一个元素 —— 即是第一个元素又是从最后一个元素开始数的第一个元素
:first-child:nth-last-child(2) 仅有2个元素的第一个元素 —— 即是第一个元素又是从最后一个元素开始数的第二个元素
:first-child:nth-last-child(3) 仅有3个元素的第一个元素 —— 即是第一个元素又是从最后一个元素开始数的第三个元素
......
就是这样,我们可以通过css像条件判断一样,自动识别匹配依据子元素的数量改变布局样式。
有人可能怀疑,你这样只能控制每种情况的第一个元素,那仅有2个元素的第二个元素的布局怎么办?兄弟选择器 ~ + 这个时候还需要上阵,这样才能将不同情况下的所有元素样式统一。
源代码分享
1.html——我是在小程序里面实现的功能,html里面一样,CSS对应子元素就行
<block wx:for="{{rewardlist}}" wx:key="index">
<view class="prize-item">
<image src="{{item.user_img}}"></image>
<view class="text-22 cor99 text-center">{{item.rew_title}}</view>
</view>
</block>
2.Css
/* 左浮动常规布局 */
.prize-item{width: 32%; float: left;overflow: hidden;margin-bottom: 15rpx;margin-right: 2%;background-repeat: no-repeat;background-size: cover;background-position: center center;}
.prize-item image{width: 180rpx;height: 180rpx;}
.prize-item:nth-of-type(3n){margin-right: 0;}
/* 仅有一个元素布局 */
.prize-item:first-child:nth-last-child(1){width: 250rpx;margin-left:calc((100% - 250rpx)/2);}
.prize-item:first-child:nth-last-child(1) image{width: 250rpx;height: 250rpx;}
/* 仅有2个元素布局 */
.prize-item:first-child:nth-last-child(2),.prize-item:first-child:nth-last-child(2) +view:nth-of-type(2){width: 49%;float:left;overflow: hidden;margin-right: 2%;}
.prize-item:first-child:nth-last-child(2) +view:nth-of-type(2){margin-right: 0;}
.prize-item:first-child:nth-last-child(2) image,.prize-item:first-child:nth-last-child(2) +view:nth-of-type(2) image{width: 260rpx;height: 260rpx;}
3.小程序js数据,纯静态页面测试的时候,直接复制几个子元素就行了,js数据可以省略。
data: {
rewardlist:[
{id:0,user_img:'/images/ava.jpg',rew_title:'20元课程抵用券'},
{id:1,user_img:'/images/ava.jpg',rew_title:'2020初级会计实务官方教材'},
{id:2,user_img:'/images/ava.jpg',rew_title:'2020初级会计实务官方教材'},
{id:3,user_img:'/images/ava.jpg',rew_title:'80元全场抵用券'},
{id:4,user_img:'/images/ava.jpg',rew_title:'100元全场抵用券'}
]
}
学会了这一招,是不是又可以吹牛逼了?我可以不用js写出9宫格不同排版样式!哈哈哈哈,为什么我原创的博客还是没有流量,泪奔~~~
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章
原始出处 、作者信息和本声明。否则将追究法律责任。