如何使用jQuery檢查元素是否打破下一行？

我有一個設置，並排顯示兩個元素，特別是一個圖像和一個Facebook像框。如何使用jQuery檢查元素是否打破下一行？

圖像具有float:left和樣箱DIV/SPAN在Facebook擁有float:right - 的HTML代碼看起來像這樣：

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

在某些情況下，當瀏覽器的寬度縮小到一定程度時，FB像框將打破（或移動）到下一行。我已經使用CSS @media查詢來處理這個問題。

不幸的是，，某些移動瀏覽器不會在相同的CSS點上「斷開」或將FB像框一樣移動到下一行。例如，它在320px寬度的iPhone和360px寬度的Note2上呈現得很好。但是，如果說三星股票瀏覽器的電話寬度爲380px，則Facebook的框會顯示在下一行，實際上該框本身被渲染爲可怕的。

如何使用jQuery檢測浮動元素是否顯示在（或斷開）下一行並執行CSS修改？

感謝您的幫助！

2016-02-23 David Z

我想，如果元件切斷成母體的新line..Height應該得到體現......你不能處理接着就，隨即？ – Rayon

不幸的是，隨着瀏覽器寬度的變化，父母的高度波動很大。如果沒有更好的答案，也許我必須去解決這個問題。 –

可能比較每個元素的位置（）。如果FB likebox是N個像素差（其中N是一個足夠大的數值表示換行符;超過幾個像素），那麼它可能是換行符。 https://api.jquery.com/position/ –

在調整大小或加載兩個元素時比較position().top可能會觸發包含CSS修改的函數。

如果left和right元素的position（）。top的頂點之間的差值的絕對值大於某個值，並且這兩個元素都設置爲對齊到其父元素的頂部，那麼理論上它就意味着這可能是一個換行符。

在這裏看到的jsfiddle例如：https://jsfiddle.net/aprtLumf/2/

2016-02-23 06:46:16

回答