Css Grid列的堆叠在彼此之上

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>

最后一行是搞砸我试图在它之前的行复制，因此创建一个可容纳infromation

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>