這個7.5是根據設計圖來的，如果設計的是750（iphone6的兩倍），這裡就是7.5.如果設計圖是640（iphone5的兩倍）的，這裡就除以6.4.不論是那個最後字型都要*2/100=單位是rem的字型
12px就是12*2/100=0.24rem ， 20px就是20*2/100=0.4rem

如果頁面是/7.5的他的寬度100%的時候其實是7.5rem。你把所有內容單位是rem的寬度加起來是7.5rem

所以如果你想一行兩個內容，並且左右有距離，就需要計算好內容和間隔的大小了

我們來看效果圖，這是在商城上經常可以看到的。

他的兩個內容左右和中間距離都是一樣的。我們設想左右都是0.2rem。元素只需要設定右邊距margin-right:0.2rem;中間的元素是3.45rem；

結果總的寬度就是。02*3+3.45*2=7.5  就是我們想要的效果。但是怎麼實現左右都是0.2呢。用margin似乎有點問題。我們可以在最外層給整體加一個margin-left:0.2rem

然後給這個元素margin-right:0.2rem就可以拉。

還有個需要注意的問題就是圖片如果是不同大小的我們需要給他設定寬高。但是也不能拉伸，應該是小的高度不夠的圖片居中其他空白填充。

程式碼奉上

<div class="shop_list">
<div class="list_classes">
<img src="img/11650.png" alt="">
<p>九陽 新款家用破壁無渣豆漿...</p>
<div class="list_classes_integral"><span>23000</span> 積分</div>
</div>
<div class="list_classes">
<img src="img/11650.png" alt="">
<p>九陽 新款家用破壁無渣豆漿...</p>
<div class="list_classes_integral"><span>23000</span> 積分</div>
</div>
<div class="list_classes">
<img src="img/11650.png" alt="">
<p>九陽 新款家用破壁無渣豆漿...</p>
<div class="list_classes_integral"><span>23000</span> 積分</div>
</div>
<div class="list_classes">
<img src="img/11650.png" alt="">
<p>九陽 新款家用破壁無渣豆漿...</p>
<div class="list_classes_integral"><span>23000</span> 積分</div>
</div>

</div>

.main .shop_list{overflow: hidden;margin-left:0.2rem;}
.main .shop_list .list_classes{width:3.45rem;float:left;margin-right:0.2rem;margin-top:0.2rem;}
.main .shop_list .list_classes p{font-size:0.24rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.main .shop_list .list_classes .list_classes_integral{font-size:0.24rem;color:red;line-height:0.55rem;}