关于小程序中,设置了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>

 

 

posted @ 2020-09-17 15:51  全情海洋  阅读(566)  评论(0编辑  收藏  举报