网页制作与网站建设技术详解,学校网站制作平台,做排名优化,佛山网站快照优化公司正常情况下#xff0c;每页大小15个#xff0c;设置每行3列#xff0c;刚好5行。 当外部容器宽度不足以放3列时#xff0c;自动换行#xff0c;但最后一行元素自动撑满 #xff0c;会造成元素块大小不一致#xff0c;不是想要的效果 原始代码示例#xff1a;
ul …正常情况下每页大小15个设置每行3列刚好5行。 当外部容器宽度不足以放3列时自动换行但最后一行元素自动撑满 会造成元素块大小不一致不是想要的效果 原始代码示例
ul classresList styleoverflow: autoli v-for(item, index) in listResData{{item}}/liel-button{{ loading ? loading : Load More }}/el-buttonp v-ifnoMore classnoMore—— No more data ——/p
/ulstyle scoped langless
ul {li { border: 1px solid #eee; background-color: #eee;marging: 0 .5%;flex-grow: 1;flex-shrink: 1;flex-basis: 32%;}}
/style
解决办法在原来的列表内手动添加一空行并定义一个不可见的样式即可这行的最大个数要等于原来每行设定的个数
li v-fori in 3 classblank/li
最终代码
ul classresList styleoverflow: autoli v-for(item, index) in listResData{{item}}/li!-- 手动添加空白行 --li v-fori in 3 classblank/liel-button{{ loading ? loading : Load More }}/el-buttonp v-ifnoMore classnoMore—— No more data ——/p
/ulstyle scoped langless
ul {li { border: 1px solid #eee; background-color: #eee;marging: 0 .5%;flex-grow: 1;flex-shrink: 1;flex-basis: 32%;}//空白元素 样式li.blank {border: 1px solid #fff0;background: #fff0;height: 0;}}
/style
最终效果
