展示文章和部分

时间:2017-05-26 16:44:04

标签: html css

所以,我正在将一个网站作为一个学校的分配,我想在其中一个页面上创建一个图像库。问题是文章和部分不能正确显示。图像显示在标题下,但文章和部分根本不显示(它们实际上显示,但仅仅因为该部分设置了50px的填充)。有没有办法可以让他们以某种方式调整图片?因为我认为这会起作用,但事实并非如此。任何帮助都非常感谢!

这里是CSS

  body {
  font-family: georgia;
  font-size: 20px;
  background: #111;
  margin: 0px;
  padding: 0px;
}

article {
  background: #e6e6e6;
  margin: 0px;
  padding: 0px;
}

article header {
  background: #51A0C4;
  padding: 1px; 
}

section {
  width: 75%;
  background: white;
  border: 0px solid;
  border-radius: 0px;
  padding: 50px;
  margin: 0 auto;
}

div.gallery {
    margin: 5px;
    border: 1px solid white;
    float:left;
    width: 200px;
}

div.gallery:hover {
    border: 1px solid #51A0C4;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
    color: black;
}

以及HTML部分

<body>
<nav> "navigation"
</nav
<article>                                                                                    
  <header><h1>gallery</h1>                                                                         
  </header>                                                                                              
  <section>                                                                 
    <div class="gallery">                                                                                                                 
      <a target="_blank" href="img/1.png">                                                                                                                                 
        <img src="img/1.png"></a>                                                                                                               
      <div class="desc">"description"                                                                                                                                       
      </div>                                                                                           
    </div>
</section>
</article>
<div class='footer'> "footer"
</div>
</body>

0 个答案:

没有答案