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）

来实现它

** Fiddle

Answer 2

您可以将HTML5代码用作<figure>和<figcaption>（而不是div＆amp; 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;
}

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

figcaption中的

文字将使用width图片作为figure宽度的参考。

如果你将figcaption设置在绝对位置，你不必考虑它们的宽度。

使用div制作的网格中的图像下方的文本

2 个答案: