javascript - 等高框+观察布局变化

标签 javascript css layout height

我应该选择哪种方式来观察网站上的布局变化?

我在两个内容框上使用 jQuery EqualHeight 插件,在第一个框上使用 border-right 来分隔它们。 如果右侧框的高度较高,则边框不适合,这就是我使用 EqualHeight jQuery 的原因。

到目前为止一切顺利......

如果右框的大小发生变化,可能是因为 Accordion 或显示/高度效果,左框的高度以及边框/分隔线保持不变。

那么观察布局变化的最简单方法是什么,而无需记忆显式操作(如显示/隐藏切换)的等高功能?

我应该使用计时器定期检查布局更改并执行函数,否则会降低性能吗?

作为旁注,我可以使用表格或显示:表格来模仿表格行为,但这有点差。我尝试了 Flexbox CSS 规则,它很棒(只是实验性的/不受支持的)。 所以作为简单的后备,我喜欢通过 JS 设置相等的高度

最佳答案

最简单的方法是了解这些布局更改何时发生。这不是在某个随机时间,总有一种方式可以说:“嘿,现在它变了”。

最简单的方法是使用更改布局并使用事件结构的 jQuery 函数。例如,在发生更改时发送自定义事件。其他元素现在可以对此进行调整。

jQuery 的优点在于几乎每个函数都有回调。在某些动画完成后使用回调将您的自定义事件发送到其他元素,以便它们可以调整高度。

关于javascript - 等高框+观察布局变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6467594/

相关文章:

javascript - 在 DataTables 编辑器中添加行总计列

javascript - libphonenumber [Js] 仅获取国家/地区代码

html - CSS 位置未按预期工作。如何解决?

Css div 和 h1 h2

layout - libgdx 表仅在右下区域布置组件

javascript - 使用 timeUpdate 和 currentTime

javascript - DataTables rows.add(array).draw() 被多次调用

javascript - 停止图像幻灯片上的图像闪烁

html - 没有固定大小的容器中的垂直和水平居中文本在 Firefox 中表现得很奇怪

html - 为什么使用表格进行网站布局如此邪恶