Question

因此，我试图让我的脑袋绕开CSS网格的内容，并弄乱了网格区域，但是不管我怎么努力，elemtns总是会出现在同一单元格中任何帮助尝试使之起作用的帮助将不胜感激

这里有HTML：

<!DOCTYPE html>
<script src="resources/js/script.js"></script>
<link rel="stylesheet" href="resources/css/main.css">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Grid 1</title>
</head>




<body>
<div class="grid-container">
  <p>Hello</p>
  <nav>
    <ul id="navbar">
      <li><a href="Index.html" class="active">Page 1</a></li>
      <li><a href="">Page 2</a></li>
    </ul>
  </nav>
  <footer>Ok</footer>
</div>


</body>
</html>

还有继承人的CSS：

@import url('https://fonts.googleapis.com/css?family=Doppio+One|Raleway|Rajdhani|Quicksand');


/* Global */

html > * {
  font-family: Quicksand;
}

body {
  margin: 0;
}

nav {
  background: #414a4c;
  overflow: hidden;
}

/* ID's */
#navbar {
  list-style-type: none;

}

#navbar a {
  text-decoration: none;
  color: white;
}

#navbar a:hover{
background-color: #e78f0d;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 10px;
}

#navbar li {
display: inline;
padding-right: 25px;
}







/* Classes */
.active {
  background-color: #4caf50;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 10px;
}

.grid-container {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-columns: repeat(3, 1fr 2fr 1fr);
  grid-template-rows: repeat(3, 2fr 1fr 2fr);
  grid-template-areas:
  "nav head"
  "nav"
  "foot";
}

.grid-container > p {
  grid-area: head;
  background: yellow;

}

.grid-container > nav {
  grid-area: nav;
  background: red;

}

.grid-container > footer {
  grid-area: foot;
  background: blue;
}


/* Keyframes */

我根本不理解这一点，因为我在Codepen上查看了一个示例，并且效果很好，我将其与之比较，但我看不出有问题

CSS网格元素最终位于同一单元格中

0 个答案: