1. 【问题】水平多个div块,超出外面div盒子后,水平出现横向滚动条?
按常理水平有多个div块,在超出外面div盒子后,会另起一行显示;但这不是我们想要的。
方法:1. 设置多个div块的外面再套一层div,设置它的宽度等于多个div宽度的和,此时多个div块外面第二层的div设置overflow:auto,这样将出现水平滚动条;
:style=" \'width:\' + \'76\'*normList.length + \'px;\' "
延伸:1. class和style的绑定:https://cn.vuejs.org/v2/guide/class-and-style.html
2. class和style的绑定的Vue源码分析:待定
2. 【问题】隐藏滚动条,但是依然要可以滚动?
方法:a:多个div高度; b: 多个div外面第二层的div高度; c: 多个div外面第三层的div高度; d: 滚动条的高度;
c = a;
b = a+d;
其中b的用法:style="height: calc(100% + 8px);overflow: auto;"
延伸:1. CSS的calc的用法:
部分使用代码:
<div class="float-left normList"> <div style="height: calc(100% + 8px);overflow: auto;"> <div :style="\'width:\'+\'76\'*normList.length+\'px;\'"> <span class="active" v-for="(item,index) in normList" :key="index">指标{{ index }} </span> </div> </div> </div>