m***@163.com
m***@163.com
  • 发布:2024-01-09 17:42
  • 更新:2024-01-09 19:18
  • 阅读:215

CSS `gap` 属性在Android上未生效

分类:uni-app

.op-box{
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 16rpx;
display: flex;
gap: 16rpx;
}

2024-01-09 17:42 负责人:无 分享
已邀请:
喜欢技术的前端

喜欢技术的前端 - QQ---445849201

可以生效,display: flex; 改成 display: grid; 试试

<template>  
    <view class="container">  
        <h1>gap</h1>  
        <view class="container">  
            <view class="grid-container op-box">  
                <view class="grid-container-d" v-for="(item,index) in 9" :key="index">item</view>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            };  
        },  
        onLoad() {  

        },  

        methods: {  
        }  
    };  
</script>  

<style>  
    .container{  
        position: relative;  
        width: 750rpx;  
        height: 500rpx;  
    }  
    .op-box {  
        box-sizing: border-box;  
        position: absolute;  
        bottom: 0;  
        left: 0;  
        width: 100%;  
        padding: 16rpx;  

        gap: 16rpx;  
        display: grid;  
        grid-template-columns: auto auto auto;  
    }  

    .grid-container-d{  
        border: 1px solid black;  
        background-color: yellow;  
    }  

</style>

要回复问题请先登录注册