使用 jQuery Resizable 同步宽度不适用于不同的内容/单词宽度答案

【问题标题】：Synchronize widths using jQuery Resizable not working on different content/word widths使用 jQuery Resizable 同步宽度不适用于不同的内容/单词宽度
【发布时间】：2023-03-25 21:43:01
【问题描述】：

我有一个类似表格的结构，它是用divs 构建的（有关详细信息，请参阅Fiddle）。总是至少有两列。

<div class="wrapper">
  <div class="container">
    <div class="cell ">c_1_1 c_1_1 c_1_1</div>
    <div class="cell ">c_1_2 c_1_2 c_1_2</div>
    <div class="cell ">c_1_3 c_1_3 c_1_3</div>
    <div class="cell ">c_1_4 c_1_4 c_1_4</div>
  </div>
  ...
</div>

可以使用 jQuery Resizable 更改这些列的宽度。每当调整“单元格”的大小时，都会调整整个列的大小。

$(document).ready(function () {
  var properties = {};

  $(".cell").resizable({
    handles: "e",
    start: function (e, ui) {
      properties.tableWidth = $(".container").width();
    },
    resize: function (e, ui) {
      var delta = ui.size.width - ui.originalSize.width;
      $(".container").width(properties.tableWidth + delta);
      var index = ui.element.index();
        $(".container").each(function (i, e) {
          $($(".cell", e)[index]).width(ui.size.width);
        });
      }
   });
});

在调整单元格大小时，我遇到以下错误：根据列中单元格的内容，某些单元格将“停止”调整大小并且不会“隐藏”溢出的内容并且单元格宽度将不再同步：

我该如何纠正这个问题？不管内容宽度如何，有没有办法在“单元格”上“强制”相同的宽度？

【问题讨论】：

标签： javascript jquery html css jquery-ui-resizable

【解决方案1】：

将.container 显示更改为table-row 将解决问题。

http://jsfiddle.net/L5ozvsuk/

【讨论】：

【解决方案2】：

虽然 Amit 的回答提供了宽度的解决方案，但它引入了另一个问题，即强制包装器显示为表格。因此，在调整单元格大小时，“行”的宽度没有改变，“单元格”的宽度也被“调整”了。

通过将container 设置为display: flex，所有cell 项目都会正确调整大小并且包含的对象会自动调整大小，即不再存在“新引入”问题（更新Fiddle）。

.container {
  width:600px;  
  border:1px solid black;
  border-right:none;
  display:flex; /*added*/
} 
.cell {
  vertical-align:top;
  display: inline-block;
  width: 150px;
  border-right:1px solid black;
  display: table-cell;
  overflow:hidden; /*added*/
}

【讨论】：