关于CSS Gird网格图片的定位

最新推荐文章于 2023-08-07 17:41:48 发布

蜂蜜柚子茶り

最新推荐文章于 2023-08-07 17:41:48 发布

阅读量207

点赞数

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_53322582/article/details/123230016

版权

下列是有关于如何在网格内插入图片后的定位代码

<style>
        .box{
            width: 600px;
            height: 600px;
            border: 1px solid #000;

            display: grid;
            /* 划分网格区域 */
            grid-template-columns: repeat(3,200px);
            grid-template-rows: repeat(3,200px);

            grid-template-areas: 
                'a a a'
                '. . b'
                '. c c'
            ;
        }
        img{
            opacity: 0.5;
        }
        .juchang{
            /* 指定站哪个区域 */
            grid-area: a;
        }
        .fang{
            /* 指定站哪个区域 */
            grid-area: b;
        }
        .chang{
            /* 指定站哪个区域 */
            grid-area: c;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="juchang">
            <a href="">
                <img width="600px" height="200px&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

蜂蜜柚子茶り

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于CSS Gird网格图片的定位

下列是有关于如何在网格内插入图片后的定位代码<style> .box{ width: 600px; height: 600px; border: 1px solid #000; display: grid; /* 划分网格区域 */ grid-template-columns: repeat(3,200px);
复制链接

扫一扫