制作网格布局时出现白线[重复]

问题描述 投票:-1回答:1

这个问题在这里已有答案:

我正在制作网格布局,并在屏幕上显示这些白线。我的代码中没有网格间隙或任何内容。它也只在我的屏幕两侧。是因为标题/侧边栏在包装器中?然后我将如何使侧边栏粘在屏幕的一侧。我是网格的新手,所以我不知道如何让侧边栏保持在一边..

enter image description here

<!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>
html css
1个回答
1
投票

你需要将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>
© www.soinside.com 2019 - 2024. All rights reserved.