如何使用jQuery检查元素是否中断到下一行？

Question

我有一个设置，可以并排显示两个元素，特别是图像和类似Facebook的框。

图像有float:left和Facebook喜欢框div / span有float:right - HTML代码看起来像这样：

<div class="header"><img class="logo" src="logo.jpg"><span class="fb-like-box"><iframe></iframe></span></div>

在某些情况下，当浏览器宽度缩小到某个点时，FB like框将中断（或移动）到下一行。 我使用CSS @media查询来处理这个问题。

不幸的是 ，某些移动浏览器不会“破坏”或将FB状框移动到相同CSS点的下一行。 例如，它在320px宽度的iPhone和360px宽度上呈现良好的注意事项2.但是，如果手机宽度为380px的三星股票浏览器，下一行显示Facebook喜欢的盒子，实际上盒子本身是可怕的。

如何使用jQuery检测浮动元素是否显示在下一行上（或中断）并执行CSS修改？

谢谢您的帮助！

Answer 1

比较resize或load position().top的两个元素的position().top可能会触发包含CSS修改的函数。

如果左边和右边元素的position（）。top之间的差值的绝对值大于一定量，并且两个元素都设置为对齐到它们的父元素的顶部，那么它理论上意味着它可能是一条线打破。

请参阅这里的jsfiddle示例： https ：//jsfiddle.net/aprtLumf/2/

jQuery position（）文档： https ： //api.jquery.com/position/