css垂直居中超出后并出现滚动条的解决方案
t-jian 时间:2021-12-17
示例效果
内容少时需要显示为(第一张),内容多是需要显示 (第二张)
这里实现主要使用flex 布局+两个盒子 配合,里面的ul 盒子必须设置一个最大的高度,才能使用内容不超出最外层盒子(如图 内容超出前面的内容被上图覆盖导致显示不全),
主要代码
css部分
.poetry-full-box { height: 140px; overflow-x: auto; padding: 0 10px; position: relative; text-align: center; } .flex-c-c { display: flex; align-items: center; justify-content: center; } .poetry-msg { max-height: 140px; font-size: 13px; }
html 采用了vue
<div class="poetry-full-box flex-c-c" > <ul class="poetry-msg" v-if="poetry.origin != null"> <li v-for="item in poetry.origin.content" :key="item">{{ item }}</li> </ul> </div>
特别声明:本站部分内容收集于互联网是出于更直观传递信息的目的。该内容版权归原作者所有,并不代表本站赞同其观点和对其真实性负责。如该内容涉及任何第三方合法权利,请及时与824310991@qq.com联系,我们会及时反馈并处理完毕。