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

Question

我正在为我的网站重新制作索引并想使用网格。所以我尝试在 Dreamweaver 上使用网格并遇到了一些问题。第一个是我有一个错误，显示“第 72 行，第 53 栏的预期 RBRACE”。第二个问题是网格未在 4 x 5 网格中对齐，网格内的内容未正确调整大小。第三个问题是 div 内的图像没有覆盖类名为“inside-box”的 div。我遇到的这个问题的解决方案是什么？请帮我。对不起，代码很长。我也是 Stackoverflow 的新手。

我已经尝试对齐我的 div 并删除网格模板列，但它们没有用。

编辑: 这是我网页的链接: 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-->

我希望它在 4 x 5 的网格中没有错误。

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。