所以,我正在将一个网站作为一个学校的分配,我想在其中一个页面上创建一个图像库。问题是文章和部分不能正确显示。图像显示在标题下,但文章和部分根本不显示(它们实际上显示,但仅仅因为该部分设置了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>