Question

我正在尝试为网站分配制作一个导航栏，并且我正在尝试利用网格来布局所有内容。我将身体分为两列。一个用于导航，另一列用于内容。但是，网格似乎不喜欢我在做什么，我完全迷失了。容器2似乎工作正常，但是容器1到处都是，我什至不能将其分成4个相等的行，这些行填满整个页面的高度...有人可以帮我解释一下我做错了什么，我该如何解决？非常感谢！

body{
    background: #5f2072; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #5f2072 0%, #183661 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #5f2072 0%,#183661 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #5f2072 0%,#183661 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5f2072', endColorstr='#183661',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: grid;
    grid-template-columns: 15% 85%;
    margin:0;
}

.container{
    background-color:white;
    overflow:hidden;
    padding:15px;
    display: grid;
    grid-template-rows: 25%,25%,25%,25%;
}
p{
    position: relative;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Explore & Imagine</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
    <script src="main.js"></script>
</head>
<body>

<div class="container">
        <p>this is something else</p>
        <p>this is something else</p>
        <p>this is something else</p>
        <p>this is something else</p>
        
</div>
    
  <div class="container2">
    <p>this is something else</p>
  </div>
    
</body>
</html>

Answer 1

我认为您的问题是grid-template-rows行上的逗号。只需删除它们，它就可以正常工作。

.container{
    background-color:white;
    overflow:hidden;
    padding:15px;
    display: grid;
    grid-template-rows: 25% 25% 25% 25%;
}

如何制作侧面导航栏？

1 个答案: