网格模板区域无响应

时间:2018-06-29 22:46:59

标签: html css css3 css-grid

我不知道我要去哪里错,但是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';
}

                                                 文森特 - 梵高                    

有史以来最伟大的艺术家?

                                                                                梵高的自画像,涂在                     1889.

                                                               

他一生的简短时间表

                                       
  • 1869年开始在The Goupil&Cie(一家艺术经销商)工作                      海牙。
  •                     
  • 1873年转移到伦敦分公司。<​​/ li>                     
  • 1875年转移到巴黎,一年后解雇了。
  •                     
  • 1876-成为英国的老师。
  •                     
  • 1877年-尝试为其大学神学学习                      入学考试。
  •                     
  • 1879年-在非常贫困的矿区成为牧师                      比利时。
  •                     
  • 1880年就读于皇家美术学院艺术学院                      布鲁塞尔的学校。
  •                     
  • 1881-未能与表弟结婚。
  •                     
  • 1883-年,他搬到比利时北部的父母住所。                     
  •                     
  • 1885-他的作品首次展出。
  •                     1866年-进入安特卫普美术学院,然后                     几个月后移居巴黎。                     
  • 1888年-搬到南部阿尔勒的黄宫                      法国。高更拜访,文森特失去了听觉。
  •                     
  • 1889-在庇护中度过了一年
  •                     
  • 1890年-尝试自杀未果,但很快                      死于伤口。
  •                                                                                

                   <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>
    

    0 个答案:

    没有答案