vue表格遍歷渲染,flex布局兩列對齊應用


1、當我們使用vue的v-for循環遍歷數據並渲染成table表格時,業務需求要求遍歷成兩列,通過flex布局來實現,但是由於每一列的字段長度不一樣,所以會存在高度不一樣的問題

 

 

 

 

 整個容器我們使用flex布局,列1和列2是div標簽,div固定寬度為容器寬度的50%,div中的第兩個元素為span,但是列1中的數字比較長導致整個撐開了列1和列2所在的行,導致布局看上去不整齊。

 

 當我們給div1和div2也添加flex布局時,就可以得到兩個列內的span元素填滿div的效果:但前提是不要給span標簽設置高度

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM