CSS：非常简单的图像库

我并不总是做网页开发，但是当我做CSS时，我能想象到的最令人沮丧的事情。我试图创建一个简单的类来保存图像和描述。我想要两行，每行有三个图像。很简单

这是我的代码，只用于显示图像，它可以正常工作

img {
  position: relative;
  margin: 0 auto;
  max-width: 650px;
  padding: 5px;
  margin: 10px 0 5px 0;
  border: 1px solid #ccc;  
}

<h3>Screenshots</h3>

<p>
<a href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
<a href="images/img2.png"><img src="images/img2.png" width="200" height="140"></a>
<a href="images/img3.png"><img src="images/img3.png" width="200" height="140"></a>
<a href="images/img4.png"><img src="images/img4.png" width="200" height="140"></a>
<a href="images/img5.png"><img src="images/img5.png" width="200" height="140"></a>
<a href="images/img6.png"><img src="images/img6.png" width="200" height="140"></a>
</p>


<h3>Installation</h3>

img{
位置：相对位置；
保证金：0自动；
最大宽度：650px；
填充物：5px；
利润率：10px0.5px0；
边框：1px实心#ccc；
}
截图


装置

这显示的图像完全符合我的要求，每行三个，然后是中的填充，然后是安装部分。为了在同一div中的图像下获得描述，我将css中的img更改为div.img，将htm代码更改为：

<h3>Screenshots</h3>

<p>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
</p>

<h3>Installation</h3>

屏幕截图


装置

人们可能会认为，生成的网页将与第一种情况下的img完全相同，而第二种情况下的div.img具有相同的属性。但事实并非如此。通过这段代码，我将每个div拉伸到列的全宽，图像在div的左侧一个接一个

---

我也尝试过这样的代码：，但在这种情况下，我得到了安装，下面的所有文本都进入了图像，忽略了有底部边距的标签。

为了保持简单：用

元素替换div，或者在CSS上为div设置

显示：inline

。这将使它们的行为符合您的预期（作为内联元素，而不是块元素）

此外：

• 您不需要

  边距：0 auto

  。它不会像处理块元素那样将内联元素居中
• 您添加了

  position:relative

  ，但似乎也不需要它。除非您打算稍后将

  绝对

  位置应用于div内的某个对象

---

这是一个没有这两个属性的JSFIDLE，并将

display:inline

添加到divs:。

请制作JSFIDLE，我会让一切为您工作：）@Truth这正是我读第一句话时想到的@skmasq在这里，几乎可以正常工作，但正如您所看到的，“安装”文本出现在图像上，边距似乎不适用：这一结果，正如在JSFIDLE上看到的，在图像下显示的边框中。您可以在divs上使用

display:inline block

，然后：