HTML - 帶圖像和文本的表格

-1

我有一個只有2行和一列的表格。第一行將顯示一個動態圖像，第二行將顯示與圖像相關的標題。HTML - 帶圖像和文本的表格

我想顯示圖像，因爲它沒有失真，所以我沒有指定高度和寬度。

現在，如果標題文字長度更多，則行寬將大於圖像行寬度。我想要的是，我想用多行顯示標題而不增加行寬。所以圖像和它的標題行寬度相同。

是否有任何解決方案....我是HTML新手，無法找到解決這個問題的方法。

來源

2012-12-19 Satyam

老兄，這是2012年（近2013年） - 爲什麼你使用'

'爲你的佈局？ – BenM

「HTML新手」 - 請了解2012年的編碼習慣，而不是1997年的編碼習慣。 – Quentin

你可以把我介紹給一些很好的編碼實踐網站......我一定會學到它們。 – Satyam

回答

試試這個：

<table> 
    <tr><td> ...image goes here...</td></tr> 
    <tr><td style="width:1px"> 
    Caption!  
    </td></tr> 
</table>

來源

2012-12-19 13:32:50 AlexZam

這實在不是我怎麼會做的事情，但呃......

如果你知道你想要多大的行爲，嘗試添加樣式到您的錶行，像...

<tr style="height:300px" ...

這樣他們都會保持同等高度。但是如果你希望它是動態的，那麼我能想到的唯一方法就是使用JavaScript來計算圖像的高度，然後適當調整表格行的樣式。使用jQuery，你可以不喜歡......

var img_height = $('table img').height(); 
$('table tr').height(img_height);

（即提供只有一個表，裏面坐了一個IMG。你可能需要調整該代碼爲合適，它只是一個例子！）

編輯：如果字幕可能比圖像大...

首先，給標題行caption一類，讓你的形象排一類的image，然後用下面的jQuery代碼：

var img_height = $('.image').height(); 
var caption_height = $('.caption:first').height(); 

if (img_height > caption_height) { 
    $('.caption').height(img_height); 
} else { 
    $('.image').height(caption_height); 
}

也許讀了如何使用jQuery代碼的解釋如下：http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

來源

2012-12-19 13:25:01 Maccath

我不知道多大的圖像或標題。兩者都是動態的。我應該在哪裏寫這個腳本？ – Satyam

編輯我的答案。真的，你不應該這樣做。您應該使用'div'元素來定位佈局元素，而不是表格。 – Maccath

你可以請建議我使用div一些代碼，以便我可以替換表？ – Satyam

使用此給予像素一個固定的表或的寬度動態圖像。這將有所幫助。不是標題不應該是沒有空格的詞，就像這個mmmmmmmm。它會自動變成多行

<table> 
    <tr><td> ...image goes here...</td></tr> 
    <tr><td style="width:1px"> 
    Caption!  
    </td></tr> 
</table>

來源

2012-12-19 14:58:51 anu

相關問題