可调整大小 div 不会改变 "left" 属性

Question

我正在尝试将 jQuery UI 的 resizable() 方法与 flexbox 一起使用（也许这就是问题所在？但我认为不太可能）。

我有 3 列，我希望可以调整左右两列的大小，并让中间的列占据剩余的部分 space。我的 CSS 看起来像这样：

.container {
  display: flex;
}

.col-left,
.col-right {
  width: 200px;
}

.col-center {
  flex: 1;
}

左栏与此 jquery:

配合得很好

$('.col-left').resizable({
  handles: 'e'
});

调整大小时添加的唯一属性是宽度，但是当我将其用于右列时：

$('.col-right').resizable({
  handles: 'w'
});

添加了 width 和 left 属性。左边的属性真是乱七八糟的布局。它把左边的列拉到中间列的上方，同时也用宽度挤压它，所以最终的结果真的很奇怪。在我的检查器中，如果我删除左边的属性它似乎工作得很好。

我已经通读了这里的文档几次，但我不知道如何关闭它。

解决方法是监听调整大小事件并覆盖 CSS 但这似乎很糟糕。

$('.col-right').resizable({
  handles: 'w'
}).on('resize', function() {
  $(this).css({
    left: 0
  });
});

更新：

经过一番挖掘，我发现这是一个 jQuery UI 错误。

Answer 1

我也遇到了同样的问题

我找到了另一个解决方法：Overriding inline styles in CSS。由于 resizable() 更改了内联样式，您可以按照以下方式做一些事情：

.col-right[style]{
  left:0 !important;
}

这将永久覆盖它；每次大小更改时，您都不需要调用 .css()。

Resizable div that doesn't change "left" property