用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 个小时试图解决它。

Answer 1

我不认为你必须在 CSS 上付出这么多。

请检查这个小提琴，让我知道这是否能解决您的问题 -

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

**小提琴