如何使用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/