这个问题在这里已有答案:
我正在制作网格布局,并在屏幕上显示这些白线。我的代码中没有网格间隙或任何内容。它也只在我的屏幕两侧。是因为标题/侧边栏在包装器中?然后我将如何使侧边栏粘在屏幕的一侧。我是网格的新手,所以我不知道如何让侧边栏保持在一边..
<!DOCTYPE html>
<html>
<head>
<title>CSS Grids</title>
<style>
html {
background-color: rgb(41, 81, 134);
height: 100%;
}
body {
height: 100%;
}
.wrapper{
height: 100vh;
width:100vh;
display:grid;
grid-template-columns:1r 5fr;
grid-template-rows: 1fr;
grid-template-areas:
"header slideshow"
}
.header {
grid-area: header;
background-color: #e0c5cf;
width: 30%;
}
.slideshow {
grid-area: slideshow;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
SOME TEXT Lorem ipsum dolor sit amet,
<div="text">
</div>
<div class="slideshow">
</div>
</div>
</body>
</html>
你需要将margin: 0
添加到你的身体元素。
<!DOCTYPE html>
<html>
<head>
<title>CSS Grids</title>
<style>
html {
background-color: rgb(41, 81, 134);
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.wrapper{
height: 100vh;
width:100vh;
display:grid;
grid-template-columns:1r 5fr;
grid-template-rows: 1fr;
grid-template-areas:
"header slideshow"
}
.header {
grid-area: header;
background-color: #e0c5cf;
width: 30%;
}
.slideshow {
grid-area: slideshow;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
SOME TEXT Lorem ipsum dolor sit amet,
<div="text">
</div>
<div class="slideshow">
</div>
</div>
</body>
</html>