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

Question

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

* прошу прощения за пыль. Я пытаюсь получить логотип слева в заголовке, но похоже, что есть 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;

}

Answer 1

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

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

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

В вашем случае вам нужно будет указать один 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 здесь