水平多个div，超出出现横向滚动条；隐藏滚动条，但是依然可以滚动；

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>

 

 

    

转载于:https://www.cnblogs.com/Neilisme/p/11190473.html