優(yōu)化背景

常見的三列式的排列布局，視覺要求區(qū)域底部無邊距間距。舊代碼使用float布局方式，js判斷需要去除下邊距的項，如下片段：

css

.item 
   background-color #FFFFFF
   width calc(((100% - 0.24rem) / 3))
   float left
   margin-right 0.12rem
   margin-bottom 0.12rem
   border-radius 0.08rem
   overflow hidden
   .item:nth-of-type(3n) 
     margin-right 0

js

// 設(shè)置商品項特殊樣式
setSpecialClass(item, idx) {
  const len = this.itemList.length
  item.specialClass = ''
  if (this.data.componentInfoJson.col === 3 && (len % 3 === 1 || len % 3 === 2) && idx >= len - (len % 3)) {
    item.specialClass = 'no-margin-bottom'
  }
  return item
}

優(yōu)化方案

1、照常使用float布局，設(shè)置頂部間距，消除前三項的頂部間距

2、使用 display: inline-block，設(shè)置底部間距，元素的垂直對齊方式為上( vertical-align: top)，消除最后三項的底部間距

使用方案2 ，原js代碼刪除，css如下：

.item 
   background-color #FFFFFF
   width calc(((100% - 0.24rem) / 3))
   display inline-block
   vertical-align top
   margin-right 0.12rem
   margin-bottom 0.12rem
   border-radius 0.08rem
   overflow hidden
   &:nth-of-type(3n) 
     margin-right 0
   &:nth-last-child(1)
     margin-bottom 0
   &:nth-last-child(2)
     margin-bottom 0
   &:nth-last-child(3)
     margin-bottom 0

float 與 inline-block

且先看使用float布局且直接消除最后三項的底部間距的表現(xiàn)

float的排列方式是：每個float盒子定位都是依據(jù)上一個盒子的右邊界來定位的，每個盒子都會往前查找，直到碰到頁面邊界。

而 display: inline-block 則嚴(yán)格按照從左到右來排列。