我不知道我要去哪里错,但是grid-template-area拒绝将我的grid-area:image3放在第二行,最右边。相反,它位于不需要的第三行。有人可以帮忙吗?抱歉,如果我格式化不正确。这是我曾经的问题。
#main{
background-color: #DEDF5F;
font-family: calibri;
}
#title{
font-family: 'Oleo Script', cursive;
text-align: center;
font-size: 60px;
}
h1{
font-family: calibri;
text-align: center;
}
#image{
grid-area: image;
width: 20%;
}
#image2{
grid-area: image2;
width: 20%;
}
#image3{
grid-area: image3;
width: 20%;
}
#tribute-info{
grid-area: info;
width:20%;
}
.grid-container{
display: grid;
grid-template-areas: 'image info image2' 'image info image3';
}
文森特 - 梵高
<div class="grid-item">
<img src="http://res.cloudinary.com/dytmcam8b/image/upload/v1530297645/490px-Van_Gogh_Portrait_of_the_Postman_Joseph_Roulin_cicrl7.jpg" alt="Portait of Postman" id="image3">
</div>
<div class="grid-item">
<p style="font-size: 30px"> If you would like to learn
more, click <a href="
https://en.wikipedia.org/wiki/Vincent_van_Gogh"
id="tribute-link" target="_blank" >here</a>.</p>
</div>
</body>