Question

在将图像添加到网格布局时遇到问题。我正在尝试学习如何使用网格，并且所有列和行都有我想要的方式，但是当我添加图像时，它并不合适。它会将所有其他列推开。我究竟做错了什么？抱歉，该代码还不是简写版本，即时消息是通过首先将所有内容写出来来学习的，因此即时消息100％可以理解我的输入内容。当一切正确时，我会缩短它的学习过程！ ;）从W3获得模板。

.main {
  max-height:90vh;
}

.item1 { grid-column: 1 / span 11; }
.item2 { grid-column: 12 / span 2 ; }
.item3 { grid-column: 14/ span 11 ; }
.item4 { grid-column: 1 / span 6;}
.item5 { grid-column: 7 / span 6 ; }
.item6 { grid-column: 13 / span 6 ;  }
.item7 { grid-column: 19 / span 6; }
.item8 {grid-column: 1/ span 24;}


.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
  grid-template-rows: 15vh 75vh 10vh;
  grid-gap: 1px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px 0;
  font-size: 30px;
  overflow: hidden;
}

#leftheader {
  width:30%;
  align-content:flex-end;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>websiteportfolio</title>
<link href="indexcss.css" rel="stylesheet" type="text/css">

<head>
</head>

<body>
<div class="main">

	<div class="grid-container">
  <div class="item1"> <img src="text\ellis.png" id="leftheader" alt="Ellis"> </div>
  <div class="item2">2 </div>
  <div class="item3">3</div>
  <div class="item4">4</div>
	<div class="item5">5</div>
  <div class="item6">6</div>
	<div class="item7">7</div>
	<div class="item8">8</div>
</div>
  </div>
   </body>


</html>

图片将其他所有列推到一边吗？

0 个答案: