解决列表某项文字过度过多 需要自适应撑开高度展示 其他项目按照行高居中
以下代码可直接复制：
两种方法：分别是方法1：bfc配合浮动撑高 其他项目子绝父相 方法二：第一项也是相对定位（不推荐）
<template><div class="far_box"><ul><li v-for="item in arr" :key="item.id"><span class="s1">{{ item.name }}</span><span class="s2">{{ item.age }}</span><span class="s3">操作</span></li></ul></div>
</template><script>
export default {data () {return {arr: [{ id: 1, name: '自己家的味道金额为搭配我陪of额欧朋foeofo违法未of额威锋网颇尔我我呃呃哦哦哦颇尔第五批东阿王', age: 10 },{ id: 2, name: '自己家的味道金额为搭配我陪of额欧朋foeofo违法未qwewqewqoeowq哦哦我哦群殴我看偶尔为空饿哦千万可开启王鹏空气我看of额威锋网颇尔我我呃呃哦哦哦颇尔第五批东阿王', age: 7 },{ id: 3, name: '自己家的味道', age: 111111112 }]}}
}
</script><style lang="less" scoped>
.far_box {ul {width: 500px;border: 1px solid #1fff;li {overflow: hidden; //设置bfc 可以解决 s1浮动时候 撑起高度 这样s1和s2才能在一定高度下居中position: relative;border-bottom: 1px solid #ccc;span {display: inline-block;}.s1 {width: 50%;word-break: break-all;float: left; //配合bfc撑起高度 --- 如果这里不写fl和上方的overflow 也可直接使用方法2：相对定位relative撑高及位移（既下方注释） 但不建议方法2// position: relative;// left: -30%;}.s2 {width: 20%;position: absolute;left: 55%;top: 50%;transform: translate(0, -50%);}.s3 {width: 10%;position: absolute;right: 0;top: 50%;transform: translate(0, -50%);}}li:last-child {border-bottom: none;}}
}
</style>
