.jpg)
Element ui布局：解決同一行相鄰列高度不一致問(wèn)題
在使用Element UI構(gòu)建頁(yè)面時(shí)，經(jīng)常會(huì)遇到同一行內(nèi)，相鄰列的高度因內(nèi)容差異而無(wú)法自動(dòng)匹配的問(wèn)題。本文將分析此問(wèn)題并提供有效的解決方案。
問(wèn)題描述
假設(shè)我們使用el-row和el-col構(gòu)建如下布局：
<el-row class="row"> <el-col class="col"> <span class="label">上平行度</span> <span class="value">較長(zhǎng)文本內(nèi)容...</span> </el-col> <el-col class="col"> <span class="label">平行度OK/NG</span> <span class="value">短文本</span> </el-col> </el-row>
即使設(shè)置.label和.value的height: auto;，由于el-col或其他樣式限制，短列的高度可能無(wú)法與長(zhǎng)列一致。
問(wèn)題分析
問(wèn)題根源在于el-col默認(rèn)高度行為以及父元素的布局方式。 el-col的高度受其內(nèi)容影響，但如果父元素（el-row）的布局方式限制了子元素高度的自動(dòng)調(diào)整，則會(huì)導(dǎo)致高度不一致。
解決方案
為了讓列高自動(dòng)適應(yīng)內(nèi)容，我們需要調(diào)整css樣式：
-
移除el-col的高度限制: 刪除el-col中任何顯式或隱式的高度設(shè)置（例如height: 100%;）。讓el-col的高度完全由其子元素內(nèi)容決定。
-
調(diào)整el-row的布局: 確保el-row的布局允許子元素高度自動(dòng)擴(kuò)展。 如果使用了align-items: center;，則將其移除或改為align-items: stretch;（stretch是默認(rèn)值，可以省略）。這將允許el-col的高度根據(jù)內(nèi)容自動(dòng)調(diào)整。
-
可選：內(nèi)容垂直居中: 如果需要內(nèi)容垂直居中，可以在.label和.value上應(yīng)用display: flex;和align-items: center;。
修改后的CSS示例：
.row { border-bottom: solid .0625rem #9c9c9c; display: flex; /* align-items: stretch; (默認(rèn)值，可以省略) */ .col { display: flex; flex-direction: column; /* 確保label和value垂直排列 */ span:not(:last-child) { border-right: solid .0625rem #9c9c9c; } ::v-deep span { flex: 1; /* 允許span高度自動(dòng)擴(kuò)展 */ word-break: break-all; word-wrap: break-word; /* height: 23px; 移除固定高度 */ /* line-height: 23px; 移除固定行高 */ text-align: center; /* 可選：水平居中 */ } .label { background-color: #e0e0e0; color: #000000; font-weight: bold; height: auto; display: flex; align-items: center; /* 垂直居中 */ } .value { height: auto; display: flex; align-items: center; /* 垂直居中 */ } } }
通過(guò)以上調(diào)整，el-col的高度將根據(jù)其內(nèi)容自動(dòng)調(diào)整，從而解決同一行相鄰列高度不一致的問(wèn)題。 記住移除任何強(qiáng)制設(shè)置el-col高度的樣式。
.png)
