小程序——用CSS实现九宫格布局

如何使用CSS实现如下的九宫格布局:

小程序——用CSS实现九宫格布局_第1张图片

代码如下:

    
      
        
      
      
        
      
    

css代码如下:

.form-first-bottom{
  margin-left:30rpx;
  margin-right:20rpx;
  margin-top:40rpx;
  padding-bottom:40rpx;
  width:clac(100% - 50rpx);
  display:flex;
  flex-wrap:wrap;
}
.add-container{
  width:calc(34% - 18rpx);
  height:200rpx;
  text-align: center;
  line-height: 260rpx;
  padding-top:13rpx;
  padding-right:13rpx;
}
.form-first-bottom>.add-container:nth-of-type(3n){ /* 选择个数是3的倍数的元素 */
  padding-right: 0;
}

.selectclass1{
  width:100%;
  height:100%;
}

 

你可能感兴趣的:(微信小程序,前端之CSS3)