最近隔壁美工小姐姐又给我找难题了,让实现以下功能,一张图居中,二张图平分,三张以上左浮动排列,据说是实现不了,所以让我切这个活动页面了,之前就总结《子选择器》过这个效果用css如何实现,今天再啰嗦一次。

实现效果:

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宫格不同排版样式!哈哈哈哈,为什么我原创的博客还是没有流量,泪奔~~~