html - Css Grid 列的 Stacking on top of each other

Question

我知道我的 HTML 和 CSS 扩展得太多了，但是当我组合它们时，它会出现更严重的错误。我的代码在下面，我需要的是最后一个像另一个一样适合的栏。我试图更改该行的填充和边距以及完全重做我的网格。

#grid {
  margin: auto;
  display: grid;
  grid-template-rows: auto;
  width: 100%;
}

#topbar {
  grid-template-columns: repeat(20, 1fr);
  background-color: white;
  grid-row: 1 / 2;
  display: grid;
}

#topbar #pad1 {
  grid-column: 1 / 3;
  background-color: #e0e0df;
}

#topbar #img {
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 3 / 5;
  color: rgb(179, 9, 50);
  text-align: center;
}

#topbar #li {
  border-bottom: 1px solid black;
  border-top: 2px solid black;
  border-right: 1px solid black;
  grid-column: 5 / 15;
  color: rgb(179, 9, 50);
  text-align: center;
}

#topbar #acre {
  border-bottom: 1px solid black;
  border-top: 2px solid black;
  border-right: 1px solid black;
  grid-column: 15 / 17;
  color: rgb(179, 9, 50);
  text-align: center;
}

#topbar #pdf {
  border-bottom: 1px solid black;
  border-top: 2px solid black;
  border-right: 2px solid black;
  grid-column: 17 / 19;
  color: rgb(179, 9, 50);
  text-align: center;
}

#topbar #pad2 {
  grid-column: 19 / 21;
  background-color: #e0e0df;
}

/* For each lan div id use #then div name to style */

#plot1 {
  grid-template-columns: repeat(20, 1fr);
  background-color: #cdcdcb;
  grid-row: 2 / 3;
  display: grid;
}

#plot1 #pad1 {
  grid-column: 1 / 3;
  background-color: #deded8;
}

#plot1 #img {
  border-bottom: 1px solid black;
  border-left: 2px solid black;
  border-right: 1px solid black;
  grid-column: 3 / 5;
  color: rgb(179, 9, 50);
  text-align: left;
}

#plot1 #li {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 5 / 15;
  color: rgb(179, 9, 50);
  text-align: left;
}

#plot1 #acre {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 15 / 17;
  color: rgb(179, 9, 50);
  text-align: right;
}

#plot1 #pdf {
  border-bottom: 1px solid black;
  border-right: 2px solid black;
  grid-column: 17 / 19;
  color: rgb(179, 9, 50);
  text-align: center;
}

#plot1 #pad2 {
  grid-column: 19 / 21;
  background-color: #e0e0df;
}

#last {
  grid-template-columns: repeat(20, 1fr);
  background-color: #cdcdcb;
  grid-row: 3 / 4;
  display: grid;
}

#last #pad1 {
  grid-column: 1 / 3;
  background-color: #deded8;
}

#last #img {
  border-bottom: 1px solid black;
  border-left: 2px solid black;
  border-right: 1px solid black;
  grid-column: 3 / 5;
  color: rgb(179, 9, 50);
  text-align: left;
}

#last #li {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 5 / 15;
  color: rgb(179, 9, 50);
  text-align: left;
}

#last #acre {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 15 / 17;
  color: rgb(179, 9, 50);
  text-align: right;
}

#last #pdf {
  border-bottom: 1px solid black;
  border-right: 2px solid black;
  grid-column: 17 / 19;
  color: rgb(179, 9, 50);
  text-align: center;
}

#last #pad2 {
  grid-column: 19 / 21;
  background-color: #e0e0df;
}

<div id="grid">
          <div id="topbar">
            <div id="pad1">
            </div>
            <div id="img">
              <p>Property</p>
            </div>
            <div id="li">
              <p>Location &amp; Information</p>
            </div>
            <div id="acre">
              <p>Acareage</p>
            </div>
            <div id="pdf">
              <p>PDF</p>
            </div>
            <div id="pad2">
            </div>
          </div>
          <!--For each piece of land add a div with its name then set grid potition in css sheet.-->
          <div id="plot1">
            <div id="pad1">
            </div>
            <div id="img">
              <p>Property</p>
            </div>
            <div id="li">
              <p>Location &amp; Information</p>
            </div>
            <div id="acre">
              <p>Acareage</p>
            </div>
            <div id="pdf">
              <p>PDF</p>
            </div>
            <div id="pad2">
            </div
          </div>
          <div id="last">
            <div id="pad1">

            </div>
            <div id="img">
              <p>hello</p>  
            </div>
            <div id="li">

            </div>
            <div id="acre">

            </div>
            <div id="pdf">

            </div>
            <div id="pad2">

            </div>
          </div>
        </div>
        <div id="foot">
          <p>Copyright &copy; 2017 Greater Texas Land Resources LP &amp;<a href="mailto:coding.matthew.horton@gmail.com"> Design</a></p>
        </div>
      </div>

最后一行搞砸了，我试图复制它之前的行，因此它创建了一个可以保存信息的图表类型的东西

Answer 1

您没有正确关闭 div 标签。(#pad2 未正确关闭)

     <div id="pad2">
        </div
      </div>
      <div id="last">
        <div id="pad1">

此外，id只能使用一次，当您需要多次应用相同的样式时，请使用class。

#grid {
  margin: auto;
  display: grid;
  grid-template-rows: auto;
  width: 100%;
}

#topbar {
  grid-template-columns: repeat(20, 1fr);
  background-color: white;
  grid-row: 1 / 2;
  display: grid;
}

#topbar #pad1 {
  grid-column: 1 / 3;
  background-color: #e0e0df;
}

#topbar #img {
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 3 / 5;
  color: rgb(179, 9, 50);
  text-align: center;
}

#topbar #li {
  border-bottom: 1px solid black;
  border-top: 2px solid black;
  border-right: 1px solid black;
  grid-column: 5 / 15;
  color: rgb(179, 9, 50);
  text-align: center;
}

#topbar #acre {
  border-bottom: 1px solid black;
  border-top: 2px solid black;
  border-right: 1px solid black;
  grid-column: 15 / 17;
  color: rgb(179, 9, 50);
  text-align: center;
}

#topbar #pdf {
  border-bottom: 1px solid black;
  border-top: 2px solid black;
  border-right: 2px solid black;
  grid-column: 17 / 19;
  color: rgb(179, 9, 50);
  text-align: center;
}

#topbar #pad2 {
  grid-column: 19 / 21;
  background-color: #e0e0df;
}

/* For each lan div id use #then div name to style */

#plot1 {
  grid-template-columns: repeat(20, 1fr);
  background-color: #cdcdcb;
  grid-row: 2 / 3;
  display: grid;
}

#plot1 #pad1 {
  grid-column: 1 / 3;
  background-color: #deded8;
}

#plot1 #img {
  border-bottom: 1px solid black;
  border-left: 2px solid black;
  border-right: 1px solid black;
  grid-column: 3 / 5;
  color: rgb(179, 9, 50);
  text-align: left;
}

#plot1 #li {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 5 / 15;
  color: rgb(179, 9, 50);
  text-align: left;
}

#plot1 #acre {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 15 / 17;
  color: rgb(179, 9, 50);
  text-align: right;
}

#plot1 #pdf {
  border-bottom: 1px solid black;
  border-right: 2px solid black;
  grid-column: 17 / 19;
  color: rgb(179, 9, 50);
  text-align: center;
}

#plot1 #pad2 {
  grid-column: 19 / 21;
  background-color: #e0e0df;
}

#last {
  grid-template-columns: repeat(20, 1fr);
  background-color: #cdcdcb;
  grid-row: 3 / 4;
  display: grid;
}

#last #pad1 {
  grid-column: 1 / 3;
  background-color: #deded8;
}

#last #img {
  border-bottom: 1px solid black;
  border-left: 2px solid black;
  border-right: 1px solid black;
  grid-column: 3 / 5;
  color: rgb(179, 9, 50);
  text-align: left;
}

#last #li {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 5 / 15;
  color: rgb(179, 9, 50);
  text-align: left;
}

#last #acre {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  grid-column: 15 / 17;
  color: rgb(179, 9, 50);
  text-align: right;
}

#last #pdf {
  border-bottom: 1px solid black;
  border-right: 2px solid black;
  grid-column: 17 / 19;
  color: rgb(179, 9, 50);
  text-align: center;
}

#last #pad2 {
  grid-column: 19 / 21;
  background-color: #e0e0df;
}

<div id="grid">
          <div id="topbar">
            <div id="pad1">
            </div>
            <div id="img">
              <p>Property</p>
            </div>
            <div id="li">
              <p>Location &amp; Information</p>
            </div>
            <div id="acre">
              <p>Acareage</p>
            </div>
            <div id="pdf">
              <p>PDF</p>
            </div>
            <div id="pad2">
            </div>
          </div>
          <!--For each piece of land add a div with its name then set grid potition in css sheet.-->
          <div id="plot1">
            <div id="pad1">
            </div>
            <div id="img">
              <p>Property</p>
            </div>
            <div id="li">
              <p>Location &amp; Information</p>
            </div>
            <div id="acre">
              <p>Acareage</p>
            </div>
            <div id="pdf">
              <p>PDF</p>
            </div>
            <div id="pad2">
            </div><!--- here was the syntax typo -->
          </div>
          <div id="last">
            <div id="pad1">

            </div>
            <div id="img">
              <p>hello</p>  
            </div>
            <div id="li">

            </div>
            <div id="acre">

            </div>
            <div id="pdf">

            </div>
            <div id="pad2">

            </div>
          </div>
        </div>
        <div id="foot">
          <p>Copyright &copy; 2017 Greater Texas Land Resources LP &amp;<a href="mailto:coding.matthew.horton@gmail.com"> Design</a></p>
        </div>
      </div>