本文主要是介绍css 实现右边div高度随着左边div内容的增加，右边div的高度也增加（左边div与右边div高度保持一致），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
从ajax传回来的数据左边撑开了比较多，右边的数据默认显示在下方，添加css更改位置
<template><div class="indexOne"><div class="nav_info"><div class="left_info">888888888888888888888888888888888888888888888888888888999999999999999999999999999999999999999999999999999999999999999999999999999999999999966666666666666666666666666666666666666666666666666666666666666669</div><div class="right_info"></div></div></div>
</template><script>
export default {name: 'indexOne',components: {},created () {}
}
</script>
<style lang="scss" scoped>
.indexOne{width:100%;height:400px;text-align:center;.nav_info{width: 100%;height: auto;background-color: aquamarine;// display: flex;position: relative;.left_info{width: 30%;height:auto;background-color: aqua;line-height: 25px;}.right_info{position: absolute;top: 0;right: 0;width: 70%;height: 100%;background-color: bisque;}}
}
</style>方法2.利用display:table
<style lang="scss" scoped>
.indexOne{width:100%;height:400px;text-align:center;.nav_info{width: 100%;display: table;display: table-row;.left_info{display: table-cell;vertical-align: middle;width: 30%;height:auto;background: rosybrown;line-height: 30px;}.right_info{display: table-cell;vertical-align: middle;width: 70%;background: greenyellow}}
}
</style>这样就实现了两个div高度一样，要想内容居中的话再加上text-align:center;就可以了
这篇关于css 实现右边div高度随着左边div内容的增加，右边div的高度也增加（左边div与右边div高度保持一致）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
