2

次のような HTML のセットがあるとします。

<div>
    This is some text, followed by an image
    <img src="some image with height greater than the text" />
</div>

また、画像は中央に垂直に配置されるように設定されています。

img {
    vertical-align: middle;
}

次に、テキストは div の下に配置されるため、画像の中央に配置されます。ここで例を参照してください: http://jsfiddle.net/RGWny/

テキストの実際の位置を検出するために javascript (または jquery、または任意の jquery プラグイン) を使用する方法はありますか?

テキストの上のギャップのサイズ (px/pt/em/etc)、またはテキストの上端から<div>テキストのベースラインまでの距離を取得する方法を探しています。

画像サイズなどを見て、位置がどこにあるべきかを実際に計算することは避けたいと思います。テキストは動的であり、テキストの最初の行にある場合とない場合があります。テキストの最初の行の垂直位置に対して別の要素を配置する必要があります。

4

1 に答える 1

2

div以下のコードのように、各テキスト ノードをspanサーバー側またはクライアント側にラップすることができます。span次に、「テキストの上のギャップ」を測定するのは非常に簡単です。これは、親に対するテキストの垂直位置ですdiv。

<div id='x'>
    This is some text, followed by an image
    <img style="vertical-align:middle" src="http://www.clker.com/cliparts/R/S/Z/4/t/f/crossed-hammers-bw-100x100-md.png" />
</div>
<script>
function wrapTextNodes(jqelem) {
    jqelem.contents()
        .filter( function() { return this.nodeType===3 && $.trim(this.nodeValue); } )
        .wrap("<span class='was-text'></span>");
}
wrapTextNodes( $('#x') );

$('#x span.was-text').each( function() {
    alert( $(this).position().top );
});
</script>
于 2013-07-29T11:04:49.960 に答える