Question

因此，我必须创建一个包含很多照片的响应式网站。现在，我想要一个只有行的网格布局。因此，要测试事情是否正常，我创建了一个包含3行的网格并将3 div放入该容器中。比我给3个div连续一个背景色。但是由于某种原因，第一行填充了背景色，而其他两行填充了50％。这怎么可能

    html {
    root: font-size: 62.5%;
    }

    header {
    height: 100%;
    width: 100vw;
    position: relative;
    }

    img {

    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    text-align: center;
    }

    nav {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

    }

    nav li {
    display: inline-flex;
    justify-content: center;
    height: 100%;
    margin-right:auto;
    margin-left: auto;
    padding: 8px 13px 8px 3px;
    }

    nav a {
    color: black;
    font-weight: bold;
    }

    main {
    height: 300vh;
    width: 100vw;
    } 

    .grid {
    height:300vh;
    width: 100vw;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    }

    .grid div {
    background-color: red;
    grid-row: 1;
    background-image:
    }

    .grid div:nth-child(2) {
    background-color: green;
    grid-row: 2;
    background-image:
    }

    .grid div:nth-child(3) {
    background-color: blue;
    grid-row: 3;
    background-image:
    }

      <body>

      <header>
        <nav>
          <img src="Logo.png" width="30%" height="30%">
          <ul>
              <a href="#"><li>Home</li></a>
              <a href="#"><li>Gallery</li></a>
              <a href="#"><li>About</li></a>
            </ul>
        </nav>
     </header>

     <main>
     <div class="grid">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     </div>
     </main>

     </body>

Answer 1

您也可以使孩子也达到100vw：

html {
    root: font-size: 62.5%;
    }

    header {
    height: 100%;
    width: 100vw;
    position: relative;
    }

    img {

    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    text-align: center;
    }

    nav {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

    }

    nav li {
    display: inline-flex;
    justify-content: center;
    height: 100%;
    margin-right:auto;
    margin-left: auto;
    padding: 8px 13px 8px 3px;
    }

    nav a {
    color: black;
    font-weight: bold;
    }

    main {
    height: 300vh;
    width: 100vw;
    } 

    .grid {
    height:300vh;
    width: 100vw;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    }

    .grid div {
    background-color: red;
    grid-row: 1;
    background-image:
    }

    .grid div:nth-child(2) {
    background-color: green;
    width: 100vw;
    grid-row: 2;
    background-image:
    }
   

    .grid div:nth-child(3) {
    background-color: blue;
    grid-row: 3;
    background-image:
    }

<body>

      <header>
        <nav>
          <img src="Logo.png" width="30%" height="30%">
          <ul>
              <a href="#"><li>Home</li></a>
              <a href="#"><li>Gallery</li></a>
              <a href="#"><li>About</li></a>
            </ul>
        </nav>
     </header>

     <main>
     <div class="grid">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     </div>
     </main>

     </body>

如何修复CSS代码，以便可以填充网格行？

1 个答案: