Question

我试图在画廊中的每个图像下面放置一些文字内容，但是我想把文字变成贝娄图像而不是侧面

我该如何解决？

Answer 1

将每个图像和段落放在一个div中，如下所示：

<div>
   <img src="" />
   <br />
   <p>Content</p>
</div>

只要您没有为其中任何一个设置float属性，这应该对您有用。

Answer 2

有几种方法可以解决这个问题。一个人会使用tables并将其放在td-tags中：

<div>
   <img src="images/search_images/musicians/adele.jpg" width="175" height="176" /><br />
   <p>Artist: Adele</p>
   <p>Genre: Singer-Songwriter</p>
</div>

另一个人会使用positioning或更优选floating。

Answer 3

有很多方法，但我会说使用一些div来为每个图像/文本项目制作单独的容器布局。

  <div class="img-container-class">
      <img src="img address here" />
      <div class="img-text-class">
         <p>Artist: Person</p>
         <p>Genre: Genre Type</p>
      </div>                  
  </div>

现在“img-text”类并非完全必要。但是，有时我觉得将文本区域分开一些是个好主意，这样你就可以对文本进行更具体的更改（这取决于你）。

就个人而言，我会回去修改其中的一些风格。在查看您发布的片段时，我注意到几乎所有元素都附加了“float：left”，以及边缘和填充的大量混合。我会说，开始简单，浮动同时保持图像和文本的div，然后让正常的流程从那里接管。一旦你获得了包含结构集，那么我认为你会找到很多可以减少的样式部分。

Answer 4

最简单有效的方法可能是单细胞表，文本在caption元素中，例如

<table class=img callpadding=0 cellspacing=0>
<caption align=bottom>
Artist: Adele<br>
Genre: Singer-Songwriter dcccc
</caption>
<tr><td><img
  src="images/search_images/musicians/adele.jpg"
  alt="(Adele)" width="175" height="176"></td>
</table>

如果要并排显示多个图像，这样会特别方便，因此一行中的图像数量不固定，而是根据窗口宽度进行调整。在这种情况下，您只需在align=left元素上设置table，并可能为它们设置一些正确的边距。

如何在不破坏结构的情况下将文本内容放在我的图像下？

4 个答案: