優(yōu)化背景
常見的三列式的排列布局锄码，視覺要求區(qū)域底部無邊距間距动遭。舊代碼使用float布局方式，js判斷需要去除下邊距的項(xiàng)券册，如下片段：
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è)置商品項(xiàng)特殊樣式
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è)置頂部間距烁焙，消除前三項(xiàng)的頂部間距
2、使用 display: inline-block耕赘，設(shè)置底部間距骄蝇，元素的垂直對齊方式為上( vertical-align: top)，消除最后三項(xiàng)的底部間距
使用方案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àng)的底部間距的表現(xiàn)
