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

Question

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

我有3列，我希望左列和右列可以调整大小，并让中间列占据所有剩余空间。我的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 AND left属性。左边的房产真的把布局搞砸了。它将左柱拉过中柱，同时用宽度挤压它，所以最终结果真的很不稳定。在我的检查员中，如果我删除了剩余的属性，它似乎可以正常工作。

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

这是我重新创建问题的笔：http://codepen.io/dustindowell/pen/NPyaBL

一个解决方法是监听resize事件并覆盖CSS，但这似乎很糟糕。

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

更新：

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

错误通知单：http://bugs.jqueryui.com/ticket/4985#comment:1

Answer 1

我也遇到了同样的问题。

我发现了另一个解决方案：在CSS中重写内联样式。由于resizable()更改了内联样式，因此可以按照以下方式进行操作：

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

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