Question

我一直试图将徽标放置在我为网站横幅制作的网格的第二列中，但是无论我如何放置它或我给“网格区域”提供什么参数，它都保留在第一栏。是什么原因呢？

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;
}

Answer 1

您的选择器有误，请尝试.logo img，而不是.logo .logo img表示您要引用的对象既是类徽标，又是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>

如何获得网格面积申请上课？

1 个答案: