Question

我的网页有一个只有2行和1列的表格。第一行将显示动态图像，第二行将显示与图像相关的标题。

我想要显示图像，因为它没有失真，因此我没有指定高度和宽度。

现在，如果标题文本长度更长，则行宽将大于图像行宽。我想要的是，我想在多行中显示标题而不增加行宽。因此图像及其标题行的宽度相同。

有没有解决方案....我是HTML的新手，无法找到解决此问题的方法。

Answer 1

这真的不是我会做的事情，而是呃......

如果您知道自己想要多大的行，请尝试在表格行中添加样式，例如......

<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

Answer 2

试试这个：

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

Answer 3

使用此选项可以将表格固定为像素或动态图像的宽度。这会有所帮助。没有标题不应该是没有空格的单词，比如mmmmmmmm。它会自动变为多行

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

HTML - 包含图像和文本的表格

3 个答案: