我正在尝试在整个 css 网格后面放置一个背景,您可以在正文中看到番茄颜色,但我希望该背景颜色完全围绕主标记。我尝试了很多不同的方法来包装它,但我有一些东西是冲突的。
另一件事是我无法让 gird 也从导航栏下方开始,我希望导航栏在顶部拉伸(stretch)并且在页面首次加载时不重叠。我不确定是否正确的方法是只留出 margin 。我想还有其他方法可以做到这一点。
这是一个jsfiddle
body {
background: tomato;
/* font-family: Helvetica, Arial, sans-serif;
line-height: 1.5; */
font: normal 1em/1.5 Helvetica, Arial, sans-serif;
margin: 0px auto;
padding: 0px;
width:80%
}
html{
background: linear-gradient(to right, palegreen,paleturquoise, plum);
}
/* main */
main{
width: 85%;
height: 80px;
margin:.5em auto;
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 1em;
}
main > div:nth-child(odd){
background: peachpuff;
}
main > div {
background: palegreen;
padding: 1em;
border-radius: 20px;
}
显示发生了什么,所以如果有人知道如何修复它,请告诉我。
最佳答案
删除 main 中的 height
将解决背景颜色问题。
main{
width: 85%;
margin:.5em auto;
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 1em;
}
将 left:0
添加到顶部导航栏。
nav{
width: 100%;
overflow: auto;
background: rgba(255, 255, 255, 0.507);
display:grid;
grid-template-columns: repeat(3, 1fr);
height: 50px;;
position: fixed;
top:0;
left: 0px; /*add this to stretch */
}
将 margin-top
给 main 是个不错的主意。这是正常的做法。
关于html - 使用 CSS 网格和布局对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50080018/