时间戳

首页 > 解决方案 > 为什么我的 css 和 html 没有将我的项目放在我想要的位置

css - 为什么我的 css 和 html 没有将我的项目放在我想要的位置

问题描述

我刚刚（即今天！）开始使用 CSS 网格，但它似乎不起作用。然而，在此之前，我注意到每个关于它的教程都使用类而不是 id。这是因为您必须使用类而不是 id？无论如何我都使用了类，但它仍然没有用！好的......只是一个简单的结构开始。我想要一个标题、导航栏、主区域的 LH 列和其他内容的 RH 列（外部样式表中的 css），但标题文本和图片只出现在 LHS 上而不是 200 像素中。

.container
{
    display:grid | inline-grid;
    grid-template-columns:200px auto 250px;
    grid-template-rows: 300px auto;
}
.navbar
{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:2;
    grid-row-end:3;
    
}
.header
{
    grid-column-start:2;
    grid-column-end:4;
    grid-row-start:1;
    grid-row-end:2; 
}

和 HTML：（显然在 <body> 标签内！）

<div class="container">
        <div class="header"><h1>Astronomy Speakers - Astronomical Societies</h1><img src="headerpic.jpg" alt="astrospe          akers header" style="margin-left:40px" /></div>
        </div>

标签： css

解决方案

对于.container，您不能同时拥有网格和内联网格。

我认为这里发生的事情是你从一个网站复制了这段代码，该网站有grid | inline grid显示作为显示属性的选项

推荐阅读