使用div创建的网格中图片下方的文字

Question

我用div制作了一个网格，上面有图片。现在我想以某种方式直接获取图像下方的文本。我不知道该怎么做。这是我的代码：

<div id="grid">
     <div id="gridtop1">
     <img src="img/img.jpeg" />
     <p>Text here</p>
     </div>
     <div id="gridtop2">
     <img src="img/img.jpeg" />
     <p>Text here</p>
     </div>
     <div id="gridtop3">
     <img src="img/img.jpeg" />
     <p>Text here</p>
     </div>
     <div id="gridbottom1">
     <img src="img/img.jpeg" />
     <p>Text here</p>
     </div>
     <div id="gridbottom2">
     <img src="img/img.jpeg" />
     <p>Text here</p>
     </div>
     <div id="gridbottom3">
     <img src="img/img.jpeg" />
     <p>Text here</p>
     </div>   
</div>

以及 CSS：

#grid   {
        position: relative;
        left: 10%;
        width: 80%;
        height: 600;
        background-color: yellow;
}
#gridtop1 {
          position: absolute;
          left: 10%;
          top: 5%;
}
#gridtop2 {
          position: absolute;
          left: 40%;
          top: 5%;
}
#gridtop3 {
          position: absolute;
          right: 10%;
          top: 5%;
}
#gridbottom1 {
             position: absolute;
             top: 55%;
             left: 10%;
}
#gridbottom2 {
             position: absolute;
             top: 55%;
             left: 40%;
}
#gridbottom3 {
             position: absolute;
             top: 55%;
             right: 10%;
}

现在我尝试了这个：

#grid p {
    text-align: justify;
    width: [width of img];
}

但是这并没有帮助到我。我不想为所有的p标签创建不同的ID。我已经接近放弃，打算使用表格来解决这个问题。但如果能让这个方法起作用就太好了。文本在图片下方，但它从中间开始，并延伸到下一张图片。请有人帮帮我，我已经花了3个小时尝试解决它。

- Pau-Lee

---

你能创建一个 JSFiddle 吗？它可以非常有用地进行测试。 - Alessandro Minoccheri

Answer 1

我认为你不必太在意CSS。

请查看这个fiddle，并告诉我是否解决了你的问题 -

你可以通过简单的CSS实现它（使用float和position）

**Fiddle

- ajc

---

我已经尝试使用float了。现在我再次尝试，但是出现了同样的问题。它可以在没有文本的情况下工作，但是当我添加文本时，它会推动下一张图片，导致它们全部混乱。有趣的是，在那个fiddle上它可以工作，但是当我尝试编辑我的页面时却不行。 - Pau-Lee

在实施之前，您需要决定一些事情-首先是1）一行中需要有多少图像。2）图像和文本的位置。您将在一行中放置4张图片还是6张图片？ - ajc

在段落标签上应用"display:block"，这样它们就会自动占据一整行而不会把所有内容都推到旁边。 - APAD1

不用担心，每天都在学习。很高兴你能完成它。 - ajc

Answer 2

您可以使用HTML5标签，如<figure>和<figcaption>（而不是div和p），并将<figure>显示为内联框。

DEMO （请参见下面的图像标题设置或将鼠标悬停在图像底部）

  <figure>
    <img src="http://dummyimage.com/120x150&text=img-2" />
    <figcaption>
      <p>Caption image</p>
    </figcaption>
  </figure>

基本 CSS：

figure {
  margin:2px;
  display:inline-block;
  vertical-align:top;
}

要使它们居中，可以在figure父容器上使用text-align:center。要将它们放在右侧或左侧，请使用text-align:right或left;。

figcaption中的文本将使用图像的width作为figure的宽度参考。

如果您将figcaption设置为绝对位置，则不必考虑其宽度。

- G-Cyrillus

---

谢谢，伙计。问题解决了。现在图片和文本已经完美对齐了。 - Pau-Lee

@Pau-Lee 你接受了其他答案，这个评论是针对另一个答案的吗？ - G-Cyrillus

这也可以，但figcaption的支持不是很好，但两个答案都不错。 - Pau-Lee