我有一个网页,其中有一个只有 2 行和 1 列的表格。第一行将显示动态图像,第二行将显示与图像相关的标题。
我想按原样显示图像而不会失真,因此我没有为此指定 andy 的高度和宽度。
现在,如果标题文本长度更长,则行宽将大于图像行宽。我想要的是,我想在不增加行宽的情况下以多行显示标题。因此该图像及其标题行的宽度相同。
有什么解决方案吗....我是 HTML 新手,无法找到解决此问题的方法。
我有一个网页,其中有一个只有 2 行和 1 列的表格。第一行将显示动态图像,第二行将显示与图像相关的标题。
我想按原样显示图像而不会失真,因此我没有为此指定 andy 的高度和宽度。
现在,如果标题文本长度更长,则行宽将大于图像行宽。我想要的是,我想在不增加行宽的情况下以多行显示标题。因此该图像及其标题行的宽度相同。
有什么解决方案吗....我是 HTML 新手,无法找到解决此问题的方法。
这真的不是我会做的事情,但是呃......
如果您知道希望行有多大,请尝试为表格行添加样式,例如...
<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
试试这个:
<table>
<tr><td> ...image goes here...</td></tr>
<tr><td style="width:1px">
Caption!
</td></tr>
</table>
使用这个给表格一个固定的像素或动态图像的宽度。这会有所帮助。not caption 不应该是没有空格的单词,比如这个 mmmmmmmm。它会自动变成多行
<table>
<tr><td> ...image goes here...</td></tr>
<tr><td style="width:1px">
Caption!
</td></tr>
</table>