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