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/等为单位），或者从顶部<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 回答