1

我并不总是做 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>

这完全按照我的意愿显示图像，每行三个，然后是 < 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 ，但在这种情况下，我得到了安装，随后的所有文本都进入图像，忽略具有底部边距的 < p > 标签.

4

1 回答 1

2

为了简单起见：用<span>元素替换你的 div，或者display: inline在你的 CSS 上为 div 设置。这将使它们的行为符合您的预期（作为inline，而不是块元素）。

还：

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

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

于 2012-07-24T16:49:44.680 回答