HTML - 带有图像和文本的表格答案

【问题标题】：HTML - Table with Image and textHTML - 带有图像和文本的表格
【发布时间】：2012-12-06 20:44:42
【问题描述】：

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

我想以不失真的方式显示图像，因此我没有为此指定 andy 的高度和宽度。

现在，如果标题文本长度更长，则行宽将大于图像行宽。我想要的是，我想在不增加行宽的情况下以多行显示标题。这样该图像及其标题行的宽度相同。

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

【问题讨论】：

老兄，现在是 2012 年（将近 2013 年） - 为什么你的布局使用 <table>？
"'m new to HTML" — 请学习 2012 年的编码实践，而不是 1997 年的编码实践。
你能给我推荐一些好的编码练习网站吗...我一定会学习的。

标签： html image html-table

【解决方案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

【讨论】：

我不知道图片或标题会有多大。两者都是动态的。我应该在哪里写这个脚本？
编辑了我的答案。不过，真的，你不应该这样做。您应该使用 div 元素来定位布局元素，而不是表格。
你能建议我一些使用 div 的代码，以便我可以替换表格吗？

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案3】：

使用这个给表格一个固定的像素或动态图像的宽度。这会有所帮助。 not caption 不应该是没有空格的单词，比如这个 mmmmmmmm。它会自动变成多行

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

【讨论】：