我一直在尝试将 Logo 放置在我为网站横幅制作的网格的第二列中，但是无论我如何放置它或我给“网格区域:”什么参数，它都会停留在第一栏。这是什么原因？
HTML 文件:
<html>
<head>
<title>Random Company</title>
<link rel="shortcut icon" type="image/x-icon"
href="./photos/favicon.ico" />
<link href="mainstyle.css" rel="stylesheet" />
</head>
<body>
<div class="banner">
<div class="logo"><img src="./photos/logo2.png"/></div>
</div>
</body>
</html>
CSS 文件:
body {
margin: 0;
}
.banner {
display: grid;
height: 140px;
width: 100%;
grid-template: 100% / 10% 10% 60% 20%;
background-color: #e8d0a9;
justify-items: center;
align-items: center;
}
.logo img{
position: relative;
grid-area: 1 / 2 / span 1 / span 1;
height: 80%;
width: auto;
}
最佳答案
你的选择器是错误的，而不是 .logo img 试试 .logo
.logo img 表示您所引用的对象既是类 Logo 又是 img 类型，而在您的 html 中它们是嵌套的。
body {
margin: 0;
}
.banner {
display: grid;
height: 140px;
width: 100%;
grid-template: 100% / 10% 10% 60% 20%;
background-color: #e8d0a9;
justify-items: center;
align-items: center;
}
.logo{
position: relative;
grid-area: 1 / 2 / span 1 / span 1;
height: 80%;
width: auto;
background-color:red
}<html>
<head>
<title>Random Company</title>
<link rel="shortcut icon" type="image/x-icon"
href="./photos/favicon.ico" />
<link href="mainstyle.css" rel="stylesheet" />
</head>
<body>
<div class="banner">
<div class="logo"><img src="./photos/logo2.png"/></div>
</div>
</body>
</html>关于html - 如何获取网格区域来申请类(class)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53904843/