Question

我并不总是进行Web开发，但是当我做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>

这显示了我想要的图像，每行三个，然后是＆lt; p>然后安装部分。为了在同一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的左侧是另一个。

我也试过这段代码：http://www.w3schools.com/CSS/css_image_gallery.asp，但在这种情况下，我得到安装，后面的所有文字都会转到图片上，忽略＆lt; p>标签有底边。

Answer 1

要保持简单：用<span>元素替换div，或在CSS上为div设置display: inline。这将使它们按预期运行（如内联，而不是块元素）。

此外：

您不需要margin: 0 auto。它不会像使用块元素一样使内联元素居中
您添加了position: relative，但似乎也不需要它。除非您打算稍后将absolute位置应用于div内的某些内容。

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

CSS：非常简单的图库

1 个答案: