Question

编辑3 我可以获得更多jQuery建议吗？我尝试了很多不同的CSS选项，但Mozilla似乎不想合作，我想做一些我知道会工作的东西...

所以我有这个2行表，我试图将图片标题全部放在同一高度，同时让图片居于<td>，我想这是最好的方法正在使用jQuery和offset()函数。但是，我不确定从哪里开始并循环遍历表中的每个<td>。

编辑：试图将图片置于<td>的中心位置，所以vertical-align: bottom不幸无法使用...

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

我想这是我的心理过程，我想尝试这样做......

概要

对于每个<tr>，每个<td>中的每个<td> ...获取跨度的最低y位置

当<td>中不再有<tr>时，再次通过该行1并将所有跨度y位置设置为等于之前找到的最低y位置。

然后转到下一行。

小提琴： http://jsfiddle.net/58u4g/14/

我有点惭愧在这里没有任何jQuery代码放在这里，尤其是当我要求它时，但我还没有尝试在jQuery中循环，特别是循环遍历表的行...还在做一些研究，但我想我会看到你的想法是什么。

提前感谢所有帮助！

Answer 1

这样的事情可能就是你要找的东西。我确信有很多方法可以用CSS来做，所以不要放弃它。

基本上我正在捕捉组中最高图像的高度，并将所有图像高度更改为该大小。或者，您可以围绕图像制作包装并更改其高度，这样就不会扭曲图像尺寸。

编辑：这会找到一行中每个跨度的偏移量并将它们全部设置为相等。看看它是否适合你（以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/

Answer 2

我建议关注更整洁的显示器：

#posiflex_directory td {
    width: 215px;
    padding: 5px;
    border: solid 1px;
    **vertical-align:top**
}

你的跨度不是绝对的表现。解决它：

#posiflex_directory a {
    color: inherit;
    height: 175px;
    position: relative;
    float:left;
}

您将看到所有跨度都在您想要的底部。

根据表jQuery </span> </span>中的最小<span>设置一组<span>的位置

2 个答案: