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