Buycraft ::在离开左边之前

Question

我有一家商店here

*灰尘请见谅。我试图将徽标放在 header 的左侧，但看起来有一个 div.header::before 但它不在我的 css 中，我假设内置某处的cms。我试过 position: absolute;还有浮动：左；运气不好。

<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/#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 here。

Buycraft ::在离开左边之前

Buycraft ::before keeping from left

html

css

cm