使用nth-of-type來實現的小程序列表佈局小技巧

要實現這種佈局該怎麼做,這個水果列表是從後臺api得到的

通過wx:for循環出來的

如果不處理,會是這個效果:

要實現就需要將左邊的一列向上移,那麼怎麼才能只操作到左邊列呢?

這裏我們可以用

.list-item:nth-of-type(2n){

position: relative;

top: -155rpx;

}

通過僞類選擇器選擇,然後設爲相對佈局,相對自己向上移動155rpx

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章