Buycraft :: прежде чем держаться слева - PullRequest
Новая
       57

Buycraft :: прежде чем держаться слева

0 голосов
/ 13 мая 2018

У меня есть магазин здесь

* прошу прощения за пыль.Я пытаюсь получить логотип слева в заголовке, но похоже, что есть div.header :: before, но его нет в моем css, и я предполагаю, что где-то встроен в cms.Я попробовал положение: абсолютное;а также плавать: слева;без удачи. 

<div class="logo">
    {% if store.logo %}
        <a href="/"><img src="{{ store.logo }}" /></a>
    {% else %}
        <span>{{ store.name }}</span>
    {% endif %}
</div>

.container {
height: 100%;
width: 100%;
margin:0;
padding:0;
border:0;
overflow: hidden;
position: fixed;

} 

.header {
    width: 100%;
    margin:0;
    padding:0;
    background-color: #333;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 3px solid  #DAC896;
}

.logo {
    position: absolute;
    float: left;

}

1 Ответ

0 голосов
/ 13 мая 2018

Кажется, что вы смешиваете все виды различных техник компоновки. Я уверен, что вы не хотите устанавливать логотип на position: absolute. Это будет позиционировать его относительно его первого (не статического) элемента-предка.

Так что вы можете избавиться от этого. Кроме того, вы также можете удалить float: left, поскольку floating был изобретен, чтобы позволить тексту обтекать изображение. Это может сбить с толку, поскольку было время floating, использованное для создания всего макета.

Но вам это совсем не нужно, потому что вы используете браузеры native-grid. Что фантастически! Просто помните о поддержке браузера: https://caniuse.com/#search=display%3A%20grid

В вашем случае вам нужно будет указать один columns сетки. Вы можете использовать свойства grid-column и grid-row. Это выглядит так: 

.logo, .navbar, .buttons {
    grid-row: 1;
}

.logo {
    grid-column: 1 / 3;
}

.navbar {
    grid-column: 2 / 3;
}

.buttons {
    grid-column: 3 / 3;
}

Подробнее о native-grid можно узнать здесь .

...