CSS:非常简单的图片库

Question

我并不总是做网络开发，但当我做 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>

这完全按照我的意愿显示图像，每行三个，然后是

和 安装 部分的填充。为了在同一个 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 拉伸(stretch)到列的整个宽度，并且图像在 div 的左侧一个在另一个下面。

我也试过这段代码:http://www.w3schools.com/CSS/css_image_gallery.asp , 但在这种情况下，我得到了 Installation 并且后面的所有文本都出现在图像上，忽略了具有底部边距的

标签。

Answer 1

为简单起见:将您的 div 替换为 <span>元素，或设置 display: inline在你的 div 的 CSS 上。这将使它们按照您的预期运行(作为内联，而不是 block 元素)。

还有:

• 你不需要 margin: 0 auto .它不会像 block 元素那样将内联元素居中
• 您添加了 position: relative ，但似乎也不需要它。除非你打算申请absolute稍后定位到 div 内的某个位置。

这是一个没有这两个属性的 jsfiddle，并添加了 display: inline到 div:http://jsfiddle.net/3BwKY/ .