Dav*_*d Z 4 html javascript css jquery facebook
我有一个设置,可以并排显示两个元素,特别是图像和类似Facebook的框.
图像有float:left和像文件盒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修改？
谢谢您的帮助!
position().top在调整大小或加载时比较两个元素可能会触发包含CSS修改的函数.
如果左边和右边元素的position().top之间的差值的绝对值大于一定量,并且两个元素都设置为对齐到它们的父元素的顶部,那么它理论上意味着它可能是一条线打破.
请参阅这里的jsfiddle示例:https://jsfiddle.net/aprtLumf/2/
jQuery position()文档:https://api.jquery.com/position/
| 归档时间： |
|
| 查看次数： |
2486 次 |
| 最近记录： |