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

HTML - 带图像和文本的表格

回答

相关问题