Question

我从HTML / CSS开始，正在考虑使用网格（grid-template-areas）。我有自己喜欢的布局，左上方的网格区域是我的网站徽标。我遇到的问题是，当我将标签添加到html时，它将导致容器增大。我已附上图片以显示我的意思。奇怪的是，它没有以与图像相同的宽度增长，因此似乎发生了某种偏移，我不知道如何停止。

更新：我意识到这不是img标签的问题，因为即使将文本添加到.logo网格区域也会导致同样的问题。

请注意容器的宽度似乎如何增加图像宽度的约50％。我不知道为什么会这样。我尝试过向样式表中的img {}和容器中添加不同的属性，但是似乎没有任何解决方法。

任何关于寻找位置的想法或建议都会很棒。我花了一些时间搜索，但是所有结果都在教您如何放大/缩小/对齐图像，以及如何防止图像与容器混淆。

这是我的HTML：

<div class="grid-container">
    <div class="logo">
        <img src="media/images/centrecircle.jpg" />
    </div>

    <div class="header">
        <h1>KickBallLife</h1>
    </div>

    <div class="leftNav">Left Nav</div>

    <div class="content">
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
    </div>

    <div class="rightWidget">Widget</div>

    <div class="footer">Footer</div>
</div>

这是我的CSS：

{
box-sizing: border-box;
}

img {

}



/* The grid container */
.grid-container {
    display: grid;
    grid-template-areas:    'logo   header  header  header  header  header' 
                            'left   middle  middle  middle  middle  right' 
                            'footer footer  footer  footer  footer  footer';
    /* grid-column-gap: 10px; - if you want gap between the columns */
}

.leftNav,
.content,
.rightWidget {
    padding: 10px;
}

.header {
    grid-area: header;
    background-color: cadetblue;
    height: 100px;
}

.logo {
    grid-area: logo;
    background-color: cornflowerblue;
    height: 100px;
}

.leftNav {
    grid-area: left;
    background-color:lightblue;
}

.content {
    grid-area: middle;
    background-color:darkblue;
}

.rightWidget {
    grid-area: right;
    background-color:aquamarine;
}

.footer {
    grid-area: footer;
    background-color:coral;
    padding: 10px;
    text-align: center;
}


@media (max-width: 1200px) {
    .grid-container {
        grid-template-areas:    'logo   logo    logo    logo    logo    logo' 
                                'header header  header  header  header  header' 
                                'left   left    left    left    left    left' 
                                'middle middle  middle  middle  middle  middle' 
                                'right  right   right   right   right   right' 
                                'footer footer  footer  footer  footer  footer';
}

我不知道这是否相关，但是实际的html在.aspx主页中。

预先感谢

特里

Answer 1

在CSS的.logo中设置宽度。

{
box-sizing: border-box;
}

img {

}



/* The grid container */
.grid-container {
    display: grid;
    grid-template-areas:    'logo   header  header  header  header  header' 
                            'left   middle  middle  middle  middle  right' 
                            'footer footer  footer  footer  footer  footer';
    /* grid-column-gap: 10px; - if you want gap between the columns */
}

.leftNav,
.content,
.rightWidget {
    padding: 10px;
}

.header {
    grid-area: header;
    background-color: cadetblue;
    height: 100px;
}

.logo {
    grid-area: logo;
    background-color: cornflowerblue;
    height: 100px;
    width: 100px; /* Change to whatever width works with your image*/
}

.leftNav {
    grid-area: left;
    background-color:lightblue;
}

.content {
    grid-area: middle;
    background-color:darkblue;
}

.rightWidget {
    grid-area: right;
    background-color:aquamarine;
}

.footer {
    grid-area: footer;
    background-color:coral;
    padding: 10px;
    text-align: center;
}


@media (max-width: 1200px) {
    .grid-container {
        grid-template-areas:    'logo   logo    logo    logo    logo    logo' 
                                'header header  header  header  header  header' 
                                'left   left    left    left    left    left' 
                                'middle middle  middle  middle  middle  middle' 
                                'right  right   right   right   right   right' 
                                'footer footer  footer  footer  footer  footer';
}

Answer 2

首先，请注释掉或删除CSS代码的前3行。要么找出您要设置border-sizing属性的元素选择器，要么。在第1行上没有选择器时，其余的CSS会出现问题。

第二，您需要在父容器上设置一个宽度，以防止徽标或任何其他内容炸毁您的网格。

我也不得不承认，CSS Grids是一个很难学的概念。我的意思是，了解FlexBox很难，但是CSS Grids则要复杂得多。此外，当前的浏览器仍然存在有关使您能够始终如一地呈现CSS网格的能力的问题。

祝你好运！

Answer 3

好，我知道了。我需要使用grid-template-columns属性设置每列的宽度。让我大吃一惊的是，我之前曾经尝试过，但是用逗号将值分开，而应该用空格将其分开，如下所示：

grid-template-columns: 15% 17.5% 17.5% 17.5% 17.5% 15%;

因此容器将是：

.grid-container {
    display: grid;
    grid-template-columns: 15% 17.5% 17.5% 17.5% 17.5% 15%;
    grid-template-areas: 'logo   header  header  header  header  header' 'left   middle  middle  middle  middle  right' 'footer footer  footer  footer  footer  footer';
}

感谢所有的建议和出发点！

特里

html中的图像（img）标记导致容器网格区域扩展

3 个答案: