1

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

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

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

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

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

大纲：

对于每个<tr>经历每个<td>...in each<td>获得跨度的最低 y 位置

当在第 1 行中不再有<td>'s<tr>时，将所有跨度 y 位置设置为等于之前找到的最低 y 位置。

然后转到下一行。

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

我有点不好意思在这里放一个没有任何 jQuery 代码的小提琴，特别是当我要求它时，但我还没有尝试在 jQuery 中循环，尤其是循环遍历表格的行......还在做一些研究它，但我想我会看到你所有的想法。

提前感谢所有帮助！

4

2 回答 2

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/

于 2013-11-14T16:02:03.387 回答
0

我建议进行以下操作以获得更整洁的显示：

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

而且您的跨度并不是绝对的。要解决这个问题：

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

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

于 2013-11-14T16:27:17.060 回答