动物相册（拖动窗口自适应）

LHNC

已于 2022-05-15 14:57:18 修改

阅读量137

点赞数 1

分类专栏：网页之路文章标签： css

于 2022-05-15 14:15:48 首次发布

本文链接：https://blog.csdn.net/llvyeriji/article/details/124781707

版权

网页之路专栏收录该内容

4 篇文章 0 订阅

订阅专栏

grid + flex

以下为html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动物相册</title>
    <link rel="stylesheet" href="css/animals2.css">
</head>

<body>
    <div class="container">
        <div class="grid">
            <div class="big"><img src="img/monkey.jpg"><p>Monkey</p></div>
            <div><img src="img/eagle.jpg"><p>Eagle</p></div>
            <div class="big"><img src="img/bird.jpg"><p>Bird</p></div>
            <div><img src="img/bear.jpg"><p>Bear</p></div>
            <div class="big"><img src="img/swan.jpg"><p>Swan</p></div>
            <div><img src="img/elephants.jpg"><p>Elephant</p></div>
            <div><img src="img/owl.jpg"><p>Owl</p></div>
        </div>
    </div>
</body>
<!--相册设置为自适应，放缩窗口不出现滚动条-->
</html>

以下为css代码

*{
    margin:0;
    padding:0;
}

.container{
    background-color: rgba(8,89,77,0.764);
    margin:20px;
    padding:10px;
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    grid-gap:15px;
    grid-auto-flow:row dense;
}

.grid div{
    display:flex;
    flex-direction:column;
}

div p{
    height:2rem;
    line-height:2rem;
    background-color: rgb(20,63,60);
    color:#fff;
    text-align: right;
    padding-right: 10px;
}

.big{
    grid-row:span 2;
    grid-column:span 2;
}

div img{
    flex:1;
}

LHNC

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动物相册（拖动窗口自适应）

grid + flex以下为html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale...
复制链接

扫一扫

专栏目录