1.为大盒子添加display:grid样式
<!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>Document</title>
<style>
.box {
width: 500px;
height: 400px;
/* background-color: #ccc; */
display: grid;
/* 每一列 */
/* grid-template-columns: 200px 100px 200px; */
/* 每一行 */
/* grid-template-rows: 100px 200px 100px; */
/* 等分的方块 */
/* grid-template-columns: 1fr 1fr 1fr; */
/* grid-template-rows: 1fr 1fr 1fr; */
grid-template-columns: repeat(3, 1fr);
grid-template-rows: (3, 1fr);
/* 设置间距 */
/* grid-column-gap:5px;
grid-row-gap: 5px; */
/* grid-gap: 20px; */
/* 行间隔 列间隔 */
grid-gap: 20px 10px;
/* 对齐方式水平方向 */
/* 拉伸 */
/* justify-items: stretch; */
/* 左对齐 */
/* justify-items: start; */
/* 剧中 */
/* justify-items:center; */
/* 右对齐 */
/* justify-items:end; */
/* 垂直对齐方式 */
/* align-items: stretch; */
/* justify-items: start; */
/* justify-items: center; */
/* justify-items: end; */
/* 对齐方式简写 */
/* place-items: center; */
/* 纵向 横向 */
place-items: start center;
}
a {
background-color: blue;
text-decoration: none;
}
.box a:nth-child(even) {
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<a href="#">111</a>
<a href="#">222</a>
<a href
最低0.47元/天 解锁文章
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
