先上图看看问题:
原本的排版是:
这个时候会出现两种情况:最后是两个产品或者三个产品,处理方式
<!--productsList是我的列表数组,除4取余就得到最后剩几个模块-->
:class="(productsList.length%4)==3?'three-product':''||(productsList.length%4)==2?'two-product':''"
样式代码:
.two-product:after{
content: '';
width: 50%;
border:1px solid transparent;
}
.three-product:after{
content: '';
width: 25%;
border:1px solid transparent;
}
结果:
原理就是利用css3的伪类元素,给其一个“孩子”用来占位