Css Grid列的堆叠在彼此之上
问题描述:
我知道我的HTML和CSS有点太多扩展,但是当我组合东西时它有更糟的错误。我的代码是低于我所需要的是最后一个酒吧适合像另一个。我试图改变该行的填充和边距,以及完全重做我的网格。Css Grid列的堆叠在彼此之上
#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 & 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 & 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 © 2017 Greater Texas Land Resources LP &<a href="mailto:[email protected]"> Design</a></p>
</div>
</div>
最后一行是搞砸我试图在它之前的行复制,因此创建一个可容纳infromation
答
你没有正确关闭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 & 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 & 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 © 2017 Greater Texas Land Resources LP &<a href="mailto:[email protected]"> Design</a></p>
</div>
</div>
第一行被认为是不同 – Matthew