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>

  • 相关阅读:
    《leetcode42接雨水》
    《84. 柱状图中最大的矩形》
    [bzoj1565][NOI2009]植物大战僵尸
    [bzoj1497][NOI2006]最大获利
    [洛谷P4092][HEOI2016/TJOI2016]树
    [洛谷P3760][TJOI2017]异或和
    [洛谷P3758][TJOI2017]可乐
    [洛谷P3761][TJOI2017]城市
    [Uva11134]Fabled Rooks
    又是一年叶落时
  • 原文地址:https://www.cnblogs.com/fsg6/p/13685620.html
Copyright © 2011-2022 走看看