商品列表图片高度不一导致排列错误

移动端vue项目渲染商品列表,由于图片差了0.x像素,导致了商品布局错乱,如下图:

百度了一下,浮动样式会造成这种情况,样式里确实用了浮动,解决方案需要去掉浮动，具体样式如下：

.inner-item{
  float:none;
  display: inline-block;   // 一行排多个
  vertical-align: top;    //因高度不一致，设置靠顶部对齐
}

参考链接:https://blog.csdn.net/k_happy/article/details/88579601

后话:浮动样式是好用,有时也要考虑情况,我就没往这个方面想过,差点都要去研究瀑布流了,结果真是啪啪打脸,特此记录