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

Question

我试着放置在每个图像的一些文字内容在画廊，但我carnt获取文本是贝娄的图像，而不是在一旁

http://jsfiddle.net/9YE3H/

我该如何解决呢？

Answer 1

把每个图像和段落在一个DIV像这样：

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

这应该为你工作，只要你没有设置浮动属性为任何人。

Answer 2

有几种方法可以解决这个问题。之一将是使用tables，并把这个在TD-标签：

<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> 

，这是特别方便的，如果你想通过显示侧许多图像侧，从而图像的一列的量不是固定的而是被根据窗口宽度的调整。在这种情况下，您只需在table元素上设置align=left，并可能为它们设置一些右边距。