zoukankan      html  css  js  c++  java
  • 关于小程序中,设置了scroll标签, 不能使用display:flex属性,如何将其子元素水平排列

    解决办法
    使用disply:inline-flex, 子级开启了flex,对外是行内块元素, 对内是开启flex,也是行内块元素
    
        <scroll-view class="navscroll" scroll-x="true">
                <view class="b">
                    <view class="c">
                        <image src="https://yanxuan-item.nosdn.127.net/ea324a88d74978c5a11fe99ece5734ae.png" mode=""></image>
    
                    </view>
                    <text>随时随地喝热水随时随地喝热水随时随地喝热水随时随地喝热水随时随地喝热水随时随地喝热水随时随地喝热水</text>
                </view>
                <view class="b">
                    <view class="c">
                        <image src="https://yanxuan-item.nosdn.127.net/ea324a88d74978c5a11fe99ece5734ae.png" mode=""></image>
                
                    </view>
                    <text>随时随地喝热水</text>
                </view>
                <view class="b">
                    <view class="c">
                        <image src="https://yanxuan-item.nosdn.127.net/ea324a88d74978c5a11fe99ece5734ae.png" mode=""></image>
                
                    </view>
                    <text>随时随地喝热水</text>
                </view>
                <view class="b">
                    <view class="c">
                        <image src="https://yanxuan-item.nosdn.127.net/ea324a88d74978c5a11fe99ece5734ae.png" mode=""></image>
                
                    </view>
                    <text>随时随地喝热水</text>
                </view><view class="b">
                    <view class="c">
                        <image src="https://yanxuan-item.nosdn.127.net/ea324a88d74978c5a11fe99ece5734ae.png" mode=""></image>
    
                    </view>
                    <text>随时随地喝热水</text>
                </view>
                
    
    
            </scroll-view>

    stylus样式

    注意,父级元素设置了white-space nowrap,不换行,子代元素文本标签会继承,需要设置成换行
    .navscroll
            // 不换行
            white-space nowrap
            // height 1000upx
            
            .b
                display inline-flex
                flex-direction column
                width 200upx
                .c
                    image
                        width 200upx
                        height 200upx
                
                text
                    font-size 24upx
                    color #000
                    // 多行文本影藏
                    // 不换行,会继承父元素的不换行,我们需要单独设置换行
                    // white-space nowrap
                    // 换行
                    white-space pre-wrap
                    overflow hidden
                    text-overflow ellipsis
                    display -webkit-box
                    -webkit-line-clamp 2
                    -webkit-box-orient vertical
            
    </style>

  • 相关阅读:
    ajax提交请求返回对象异常问题
    Rhino+envjs-1.2.js 在java运行网站js 工具类
    CryptoJS遇到的小坑
    BT是如何下载的
    NPOI 复制Word中的表格内容, 操作Word表格
    使用Scapy框架进行PPPOE拨号密码截取
    用Python养一只DHT爬虫
    如何解决jquery版本冲突
    安装ECMall后报PHP Strict Standards错误,请问如何解决
    如何在Webstorm/Phpstorm中设置连接FTP,并快速进行文件比较,上传下载,同步等操作(远程开发)
  • 原文地址:https://www.cnblogs.com/fsg6/p/13685620.html
Copyright © 2011-2022 走看看