本文介绍了一种仅使用CSS就能解决Vue项目中div模拟表格样式时出现的竖向边框长度不一致问题的方法。作者最初计划通过Vue的ref操作DOM来获取最高元素的高度，但在进一步研究后找到了一种更优雅的解决方案：通过调整父元素和子元素的显示属性，或者利用overflow、padding-bottom及margin-bottom属性配合使用来实现。
最近在写vue项目时打算用div写成table的样式，在处理边框时遇到竖向的边框长短不一的问题，一开始的想法是用vue的ref操作dom来获取高度最大元素的高度，后来就在想能否只用css是想这一需求，在查阅尝试多次之后成功，在这里分享记录
1.直接使用父元素 display：table，子元素 display：table-ceil；（原本就没有打算用table布局）
2.为父元素设置 overflow：hidden再为子元素设置大的 padding-bottom 属性，再用相等的负 margin-bottom 属性抵消；
（我是月铭泽，第一次记录博客，错误之处请指正）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
