HTML和CSS网格未与CSS中的RBRACE错误正确对齐

Question

我正在为我的网站重新创建索引，并希望使用网格。所以我试着在Dreamweaver上使用网格，遇到了一些问题。第一个是我有一个错误，说“预期的RBRACE在第72行，第53列”。第二个问题是网格没有在4x5的网格中对齐，网格中的内容没有正确调整大小。第三个问题是div中的图像没有覆盖类名为" inside -box“的div。我遇到的这个问题的解决方案是什么？请帮帮我。很抱歉代码太长了。我也是Stackoverflow的新手。

我尝试过对齐did和删除grid-template-column，但它们都不起作用。

编辑:这是我的网页链接：http://techteach.us/Web2020/ZWeiJian/Labs/Index.html

​

/*The CSS for making the grids.*/
.wrapper{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(4, 1fr));
  grid-column-gap: 0.5px;
  grid-row-gap: 75px;
  grid-auto-rows: minmax(200px, auto);
}

/*For each individual box.*/
.box{
  border: 1px solid black;
  min-width: 20%;
  background-color: white;
  margin: 0;
}

/*Creates the styling of the dropdown box.*/
.dropdown-content {
  display: none;
  position: relative;
  background-color: blue;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

/*Makes a dropdown box when hovered over.*/
.inside-box:hover .dropdown-content{
  display: block;
}

<!--HTML FILE-->
<div class="wrapper">

   <!--Lab 1-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 1</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>
	
   <!--Lab 2-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 2</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 3-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3> Lab 3</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 4-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 4</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>
</div>
     <!--End of inside box div.-->
     

   <!--End of box div.-->
   </div>

   <!--Lab 5-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 5</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 6-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 6</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 7-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 7</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 8-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 8</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 9-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 9</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 10-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 10</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 11-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 11</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 12-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 12</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 13-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 13</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 14-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 14</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 15-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 15</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 16-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 16</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 17-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 17</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 18-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 18</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 19-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 19</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

   <!--Lab 20-->
   <!--Each individual box.-->
   <div class="box">

     <!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
     <div class="inside-box">

       <!--The div with an image in it. Top one inside the box div.-->
       <div>
         <img src="">
       </div>

       <!--The div that contains the heading or title of the lab.-->
       <div class="txtBar">
         <h3>Lab 20</h3>
       </div>

       <!--The div that drops down to explain the lab with some text.-->
       <div class="dropdown-content">
         <p>Explanation of text.</p>
       </div>

     <!--End of inside box div.-->
     </div>

   <!--End of box div.-->
   </div>

</div>
 <br>
<!--END OF HTML FILE-->

​

我希望它在一个4x5的网格中，没有错误。

Answer 1

主要问题出在下面这一行：

/* incorrect */

grid-template-columns: repeat(auto-fill, minmax(4, 1fr));

auto-fill使列填充整个网格区域。将该行替换为以下内容：

/* Try this instead */

grid-template-columns: repeat(4, 1fr);

否则，我不能肯定整体意图，因此不能评论其他观点。请详细说明您在这里要做的事情。

另外，如果您对开发技能很感兴趣，可以考虑其他功能丰富的代码编辑器，如VS Code、Atom或Sublime。