zoukankan      html  css  js  c++  java
  • CSS3实现多列纵向滚动

    效果如图:
    小程序wxml:
    <view class='wraper'>
    <view class="header">
    头部
    </view>
    <view class='section'>
    <scroll-view scroll-y="true" class='left' scroll-view="true">
    <view wx:for="{{30}}" wx:key="{{index}}" class='row'>{{index}}</view>
    </scroll-view>
    <scroll-view class='right' scroll-y="true">
    <view wx:for="{{30}}" wx:key="{{index}}" class='row'>{{index}}</view>
    </scroll-view>
    </view>
    <view class='footer'>
    底部
    </view>
    </view>
     
    wxss:
    .wraper {
         100%;
        height: 100%;
        overflow: hidden;
        display: -webkit-box;
        -moz-box-orient: vertical;
        -webkit-box-orient: vertical;
    }
    .header,.footer{
         100%;
        height: 120rpx;
        line-height: 120rpx;
         font-family: Monaco; font-size: 9pt;">#fff;
        text-align: center;
    }
    .section {
        display: -webkit-box;
         100%;
        -webkit-box-flex: 1;
    }
    .left {
        -webkit-box-flex: 1;
         400rpx;
        overflow: auto;
         font-family: Monaco; font-size: 9pt;">#fff;
    }
    .right {
        -webkit-box-flex: 1;
        overflow: auto;
    }
    .row {
         100%;
        height: 90rpx;
        border-top: 1rpx solid #ccc;
    }
    实现思路给最外层大盒子设置弹性盒,并改变方向。头部固定高,底部固定高,中间高度为flex:1;并变为弹性盒,在中间左固定宽度,高度flex:1;over-flow: auto;右侧相同。即可实现圣杯布局中间多列纵向滚动。
    这里用的是box,使用一样的用法,查看上篇display:box
  • 相关阅读:
    Apache Flink 1.12.1发布
    flink 修改web页面刷新时间
    flink 支持的sql 方言
    flink sql 读取hive 表报错
    Typora配置正文、目录、侧边大纲中的标题自动编号
    滴滴开源Logi-KafkaManager 一站式Kafka监控与管控平台
    建立 nfs 服务器
    Linux 设备驱动的第一个例子 。
    备份.vimrc
    shell编程实例
  • 原文地址:https://www.cnblogs.com/bgwhite/p/9304766.html
Copyright © 2011-2022 走看看