Question

我在HTML中有两个彼此相邻的图像。一张图像比另一张图像高。图片具有vertical-align: middle CSS属性。这使得较短的图像相对于父容器的位置低于较高的图像。

我使用jQuery .position()方法来获取图像的位置。两个图像的position.top是相同的，当明显较短的图像由于vertical-align: middle CSS属性而进一步向底部偏移时。

如何考虑vertical-align: middle CSS属性引起的垂直差异，如何获得图像的实际位置？

更新：

问题发生的原因是我执行以下操作：

我的HTML输出时图像没有src属性。他们是这样有宽度和高度，所以浏览器不需要等待在计算其位置
我设置了每个图片的src属性
我使用jQuery检查位置。我的猜测是浏览器（FF 9.0.1）在更新其位置并使其可供JS

我需要重新设计我的应用，以便不会发生这种情况

Answer 1

试试这个。

http://jsfiddle.net/cadence96/X54gy/

small = parseInt($('img:eq(0)').css('height'));
big = parseInt($('img:eq(1)').css('height'));

difference = big - small;
top_distance = difference/2;

alert(top_distance);

Answer 2

只需获得较高div的高度，从中减去div的高度，然后除以2.这将为您提供与父div的偏移量

Answer 3

using jquery.offset会给你相对于全身的实际位置。如果你只想要它相对于它的父，你可以编写一个脚本;

function findPos(obj,till){
    var curleft = curtop = 0;
    curleft += obj.offsetLeft;
    curtop += obj.offsetTop;
    return [curleft,curtop];
}

(c) Peter-Paul Koch

获取图像相对于父级的位置，考虑垂直偏移

3 个答案: