.goods_list {
padding: 0 15rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.goods_item {
background: #fff;
width: 355rpx;
margin: 10rpx 0;
padding: 15rpx;
box-sizing: border-box;
image {
width: 80%;
height: 150px;
display: block;
margin: auto;
}
.price {
color: $shop-color;
font-size: 36rpx;
margin: 20rpx 0 5rpx 0;
text:nth-child(2) {
color: #ccc;
font-size: 28rpx;
margin-left: 17rpx;
text-decoration: line-through;
}
}
.name {
font-size: 28rpx;
line-height: 50rpx;
padding-bottom: 15rpx;
padding-top: 10rpx;
}
}
}
你的模拟器使用414*736 还设置89%,这样不规范吧
一般默认一个固定宽度 375,设计图按照375设计
wrap是允许换行,你加了padding可能是一行排不下两个
这种使用grid会好一点
你的image宽度太大,改成48%,外面的padding给成1%,这样应该不会超了
image {
width: 80%;
height: 150px;
display: block;
margin: auto;
}
你这怎么这么混乱呢,你发的截图不是已经换行了吗