如何检测元素是否浮动在另一个元素下面?

时间:2012-09-12 23:33:47

标签: jquery css web

我有一个盒子里面有两个漂浮在其中的盒子。如果视口很大,则框彼此相邻。如果视口较小,则框会一个在另一个上面(jsFiddle,修复宽度和高度,仅用于说明我拥有的两个场景:http://jsfiddle.net/5wpH9/

我想使用jQuery为容器盒提供一个高度(不相关,但我的包装器中的每个元素都需要有一个固定的高度,不能有自由浮动而不占用垂直空间)。我需要根据内部元素相互浮动或不是来计算此容器盒的高度。

里面的小盒子有固定的高度,所以结果会是这样的:

  • 如果元素彼此相邻,则使容器200px高度
  • 如果元素是一个在另一个之上,则使容器400px高度

我能想到的唯一方法是从第二个框的顶部到容器的顶部进行offset()position()计算(如果它超过10px,则应用更改)。但我想知道是否有更好的方法,更直接。

2 个答案:

答案 0 :(得分:2)

检查.position()并不是那么糟糕:

if($("#topElement").position().top - $("#bottomElement").position().top > 10) {
    $("#bottomElement").css("height", "400px");
}

当然,您需要更改ID - 但您明白了。

答案 1 :(得分:0)

我不明白,我的意思是你不能只用CSS调整容器的内容吗?  容器上的overflow: hidden应该可以解决问题,不需要height

演示: http://jsfiddle.net/elclanrs/5wpH9/3/