以前我都会用display:flex弹性布局的方式来写,今天学会了一种新写法,不浮动,也不弹性的方式,用div的方式实现。
给div设置固定宽度,并带上右外边距。然后用style对index第4个(一排放4个的话index % 4 === 3 )的margin-right:0px
<div style="width: 100%;min-height: 800px;margin-top: 60px">
<div v-for="(city, index) in cities"
:key="index"
:style="index % 4 === 3 ? 'margin-right:0px' : ''"
class="shopping-box"></div>
</div>
.shopping-box {
margin-right: 20px;
width: 285px;
}