1

EDIT 3さらにjQueryの提案をお願いできますか? 私は非常に多くの異なる CSS オプションを試しましたが、Mozilla は協力したくないようです。うまくいくとわかっていることをしたいと思います...

だから私はこの2行のテーブルを持っていて、写真を中央に置いたまま、写真のキャプションをすべて同じ高さにしようとし<td>ていoffset()ます. <td>ただし、これをどこから始めて、テーブル内のそれぞれをループするかについてはよくわかりません。

編集:画像を中央に配置しようとしている<td>ので、vertical-align: bottom残念ながらうまくいきません...

編集2：position: relative私は2つの異なるスタイリングシートも使用しています... 1つはIE用で、もう1つは他のすべてのものです... IEは問題ありません<td>。 Firefoxで相対位置に設定すると、すべてのキャプションが1つずつ積み重ねられて、ララランドに配置されるため、機能しません。では、jQuery スクリプトに含める方法はありますif browser != IE then...か?

これが、私がこれをどのようにしようとするかについての私の精神的プロセスだと思います...

概要：

For each <tr>go through every <td>...in each<td>スパンの最も低い y 位置を取得します

がなくなったら<td>、<tr>行をもう 1 回調べて、すべてのスパンの y 位置を以前に見つかった最小の y 位置に等しく設定します。

次に、次の行に進みます。

フィドル: http://jsfiddle.net/58u4g/14/

特に私がそれを求めているときに、jQueryコードなしでここにフィドルを置くのは少し恥ずかしいですが、jQueryでループすること、特にテーブルの行をループすることをまだ試していません...まだいくつかやっていますそれについて研究しましたが、私はあなたの考えがすべて何であるかを見るだろうと思いました.

すべての助けを前もってありがとう！

4

2 に答える 2

1

このようなものは、おそらくあなたが探しているものです。CSSでそれを行う方法があると確信しているので、まだあきらめないでください.

基本的に、グループ内の最も高い画像の高さをキャプチャし、すべての画像の高さをそのサイズに変更しています。または、画像の周りにラッパーを作成し、その高さを変更して、画像の寸法を歪めないようにすることもできます。

EDIT：これは、行内の各スパンのオフセットを見つけ、それらをすべて等しく設定します。それがうまくいくかどうかを確認してください（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 に答える