javascript - 根据表中最低的 <span> 设置一组 <span> 的位置 jQuery

Question

EDIT 3 我能得到更多 jQuery 建议吗？我尝试了很多不同的 CSS 选项，但 Mozilla 似乎不想合作，我想做一些我知道会起作用的事情...

所以我有这个 2 行表，我试图让图片标题都处于相同的高度，同时让图片在 <td> 居中。 ，我认为最好的方法是使用 jQuery 和 offset()功能。但是，我不太确定从哪里开始并遍历每个 <td>在表中。

编辑: 试图让图像在 <td> 中居中所以vertical-align: bottom不幸的是不会工作...

编辑 2: 我还使用了 2 个不同的样式表...一个用于 IE，然后一个用于其他...IE 很好，因为我可以设置 position: relative到我的<td>并且一切仍然有效......其他一切它不起作用的样式表，因为在 Firefox 中，如果我将它设置为相对位置，它最终会将所有标题堆叠在一起并将其放置在 lala land 中。那么，有没有办法在 jQuery 脚本中包含 if browser != IE then... ？

我想这是我想如何尝试去做这件事的心理过程......

大纲:

对于每个 <tr>遍历每个 <td> ...在每个<td>获取跨度的最低 y 位置

当没有更多<td>时在 <tr> 中再遍历第 1 行并将所有跨度 y 位置设置为等于之前找到的最低 y 位置。

然后转到下一行。

fiddle : http://jsfiddle.net/58u4g/14/

我有点不好意思在这里放一个没有任何 jQuery 代码的 fiddle ，尤其是当我要求它时，但我还没有尝试在 jQuery 中循环，尤其是循环遍历表格的行...仍在对此进行一些研究，但我想我会了解您的所有想法。

在此先感谢您的所有帮助!

Answer 1

您可能正在寻找类似的内容。我确信有一些方法可以用 CSS 做到这一点，所以不要放弃。

基本上，我正在捕获组中最高图像的高度，并将所有图像的高度更改为该尺寸。或者，您可以在图像周围制作一个 wrapper 并更改其高度，这样就不会扭曲图像尺寸。

编辑:这会找到一行中每个跨度的偏移量并将它们全部设置为相等。看看这是否适合你(在 chrome/ff 中测试)

$('tr').each(function() {
    var height = 0;
    var $tr = $(this);
    $tr.find('a span').each(function() {
        $(this).offset().top > height ? height = $(this).offset().top : '';
    }).promise().done(function() {
        $tr.find('a span').each(function() {
            $(this).offset({ top: height });
        });
    });
});

在这里试试:http://jsfiddle.net/58u4g/28/