如何在不破壞結構的情況下將文字內容放置在我的圖像下？

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，並可能爲它們設置一些右邊距。