网站收录更新,大型网站费用,网站设计的实例,济南万网站建设有限公司地址背景#xff1a;遇到在一个容器里#xff0c;采用弹性盒布局的时候#xff0c;如果元素个数改变#xff0c;元素的排列会错乱。 解决方式 方式一#xff1a;之前遇到的时候#xff0c;是采用计算元素个数的方式#xff0c;采用透明元素补齐的方式#xff08;比如一个有…背景遇到在一个容器里采用弹性盒布局的时候如果元素个数改变元素的排列会错乱。 解决方式 方式一之前遇到的时候是采用计算元素个数的方式采用透明元素补齐的方式比如一个有5个元素上一行3个正常布局剩下的2个在下一行是错乱的布局少一个元素凑成3个 改用透明的方式就能规则排列。 方式二看了同事的解决方法 项目采用的是vue结合elementui的方式利用layout布局组件完成这个组件可以有响应式参照了 Bootstrap 的 响应式设计预设了五个响应尺寸xs、sm、md、lg 和 xl。
el-row :gutter10el-col :xs8 :sm6 :md4 :lg3 :xl1div classgrid-content bg-purple/div/el-colel-col :xs4 :sm6 :md8 :lg9 :xl11div classgrid-content bg-purple-light/div/el-colel-col :xs4 :sm6 :md8 :lg9 :xl11div classgrid-content bg-purple/div/el-colel-col :xs8 :sm6 :md4 :lg3 :xl1div classgrid-content bg-purple-light/div/el-col
/el-row我项目里的是 el-rowel-col:keytagv-fortag in dynamicTagsclasstagcol:xs24:sm12:md8:lg8:xl6el-tagtypeinfoclosable:disable-transitionsfalseclosehandleClose(tag){{ tag }}/el-tag/el-col/el-row表示该容器里元素每一列按照屏幕大小改变而占据的宽度不同。意味着最小的时候列占完即只展示一个元素最大的时候占用6份即显示4个元素一行为24份。
