Как получить область сетки, чтобы применить к классу? - PullRequest
Новая
       6

Как получить область сетки, чтобы применить к классу?

0 голосов
/ 23 декабря 2018

Я пытался расположить логотип во втором столбце сетки, которую я создал для баннера веб-сайта, однако, независимо от того, как я его позиционирую или какие аргументы я задаю «grid-area»: он остается впервый столбецВ чем причина?

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

1 Ответ

0 голосов
/ 23 декабря 2018

Ваш селектор неправильный, вместо .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>
...