前端开发：巧妙解决同一行相邻列高度差异
在前端布局中，同一行内相邻列高度不一致是常见问题，尤其在使用组件库（如Element UI）时。本文分析问题根源，并提供有效解决方案。
问题描述
假设使用Element UI的el-row和el-col组件，HTML结构如下：
上平行度 平行度OK/NG
对应的CSS代码：
.row { border-bottom: solid .0625rem #9c9c9c; display: flex; align-items: center; justify-content: center; .col { height: 100%; display: flex; span:not(:last-child){ border-right: solid .0625rem #9c9c9c; } ::v-deep span { flex: 1; height: 100%; word-break: break-all; word-wrap: break-word; height: 23px; line-height: 23px; } .label{ background-color: #e0e0e0; color: #000000; font-weight: bold; height:auto; } .value{ height: auto; } }}
当列内容长度不同时，高度会不一致。
立即学习“前端免费学习笔记（深入）”；
问题分析
问题在于align-items: center;和el-col的高度设置。align-items: center;使列垂直居中，但不同高度的列无法等高。col的height: 100%;限制了其高度，导致内容撑开高度时，其他列高度不变。
解决方案
解决方法如下：
调整align-items属性: 将align-items: center;改为align-items: stretch;，使列高度充满容器。 (实际上恢复默认值即可)移除col的固定高度: 删除col的height: 100%;，让列高度自适应内容。内容居中处理: 由于内容高度自适应后，内容可能不再居中，需要为.label添加display: flex;和align-items: center;实现垂直居中。
修改后的CSS代码：
.row { border-bottom: solid .0625rem #9c9c9c; display: flex; align-items: stretch; /* 修改此处 */ justify-content: center; .col { display: flex; span:not(:last-child){ border-right: solid .0625rem #9c9c9c; } ::v-deep span { flex: 1; word-break: break-all; word-wrap: break-word; height: 23px; line-height: 23px; } .label{ background-color: #e0e0e0; color: #000000; font-weight: bold; height:auto; display: flex; /* 添加此处 */ align-items: center; /* 添加此处 */ } .value{ height: auto; } }}
通过以上调整，即可解决同一行相邻列高度不一致的问题，实现列高度统一和内容居中。
以上就是如何解决前端开发中同一行相邻列高度不一致的问题？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1564017.html
微信扫一扫 
支付宝扫一扫 
