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

Question

I have a setup that displays two elements side-by-side, specifically an image and a Facebook like box.

The image has float:left and the Facebook like box div/span has float:right - the HTML code looks something like so:

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

In certain situations when the browser width shrinks to a certain point, the FB like box will break (or move) to the next line. I have used CSS @media queries to deal with this.

Unfortunately , certain mobile browsers do not 'break' or move the FB like box to the next line at the same CSS points. For example it renders fine on a 320px width iPhone and a 360px width Note 2. However, on say the Samsung stock browser with a phone width of 380px, the Facebook like box is displayed on the next line and actually the box itself is rendered horribly.

How do I use jQuery to detect if a floating element is displayed on (or breaks to) the next line and execute a CSS modification?

Thanks for the help!

Answer 1

Comparing position().top of both elements on resize or load could trigger a function containing a CSS modification.

If the absolute value of the difference between position().top of the left and right elements is greater than a certain amount, and both elements are set to align to the top of their parent element, then it would theoretically mean it's probably a line break.

See jsfiddle example here: https://jsfiddle.net/aprtLumf/2/

jQuery position() documentation: https://api.jquery.com/position/