Javascript 删除内容后如何保持flex元素的宽度？

我有这种灵活的布局和一些JS

.wordpool元素中填充了一些需要通过单击移动到.category元素的单词

现在发生的情况是，当您单击单词时，.window元素的宽度正在缩小。有没有办法防止这种行为？我能想到的唯一方法是在渲染时计算字池宽度，并将其设置为样式属性，但它在响应性方面有缺点

我无法删除flex功能，因为左侧可选面板和右侧面板都需要相同的宽度和居中

我不能使用静态宽度，因为它需要响应

它不能像.window{width:90%；}那样，因为短内容在宽屏幕上看起来很傻

---

在我的应用程序中，页面之间的左右内容都会发生变化——想想测验或谷歌表单——可以是文本，也可以是图像、复选框、单选按钮等，但HTML模板是相同的

根据加载时的实际文本宽度，将这一行添加到脚本中，使其成为动态的

$(".window").css('min-width', $(".window").width() + 'px');

您可以这样做，而不是监视较小屏幕的调整大小事件

注意，宽度：100%需要使用脚本设置，如果在CSS中设置，计算将出错

---

由于您希望它是动态的，根据加载时的实际文本宽度，将这一行添加到脚本中

$(".window").css('min-width', $(".window").width() + 'px');

您可以这样做，而不是监视较小屏幕的调整大小事件

注意，宽度：100%需要使用脚本设置，如果在CSS中设置，计算将出错

---

只是为了提供另一个解决方案，这可能不是您想要的：

不要更改容器中的元素，只需将它们放在两个容器上，然后切换不透明度

您可以使用flexbox和order重新排列它们

变量按钮=[{ 姓名：罗琳 }, { 姓名：ipsum }, { 姓名：多洛 }, { 姓名：sit }, { 姓名：amet } ]; $document.readyfunction{ 对于按钮b{ $'.wordpool'。追加${ 类别：word， id:b.姓名 }.htmlb.name； $'.category'。追加${ 类别：单词隐藏， id:b.姓名 }.htmlb.name； } $.wordpool.onclick，span，function{ $this.toggleClass'hidden'； $.category+$this.attr'id'。切换类'hidden'； }; $.category.onclick、span、function{ $this.toggleClass'hidden'； $.wordpool+$this.attr'id'。切换类'hidden'； }; $body.onclick、.show可选，函数{ $.left.toggle； }; }; html， 身体{ 身高：100%； 保证金：0； } .包装纸{ 框大小：边框框； 宽度：100%； 身高：100%； 填充：20px； 显示器：flex； 证明内容：中心； 对齐项目：居中； 背景：f4efdc； } .show可选{ 位置：绝对位置； 顶部：5px； 左：5px； } .窗户{ 背景：fff； 盒影：0 10像素ccc； 显示器：flex； } 左边 .对{ 填充：20px； flex:100px； } .左{ 显示：无； } .可选{ 背景：eee； 文本对齐：居中； 填充：50px0； } .字{ 显示：内联块； 保证金：2p5px； 填充物：3px 5px； 边框：1px实心ddd； 光标：指针； } .隐藏{ 不透明度：0； 订单:99份;； } .wordpool{ 文本对齐：居中； 显示器：flex； } .类别{ 边缘顶部：10px； 边框：1px实心ccc； 最小高度：60px； } .类别.单词{ 显示：块； 文本对齐：居中； 保证金：2倍； } 可选内容

---

只是为了提供另一个解决方案，这可能不是您想要的：

不要更改容器中的元素，只需将它们放在两个容器上，然后切换不透明度

您可以使用flexbox和order重新排列它们

变量按钮=[{ 姓名：罗琳 }, { 姓名：ipsum }, { 姓名：多洛 }, { 姓名：sit }, { 姓名：amet } ]; $document.readyfunction{ 对于按钮b{ $'.wordpool'。追加${ 类别：word， id:b.姓名 }.htmlb.name； $'.category'。追加${ 类别：单词隐藏， id:b.姓名 }.htmlb.name； } $.wordpool.onclick，span，function{ $this.toggleClass'hidden'； $.category+$this.attr'id'。切换类'hidden'； }; $.category.onclick、span、function{ $this.toggleClass'hidden'； $.wordpool+$this.attr'id'。切换类'hidden'； }; $body.onclick、.show可选，函数{ $.left.toggle； }; }; html， 身体{ 身高：100%； 保证金：0； } .包装纸{ 框大小：边框框； 宽度：100%； 身高：100%； 填充：20px； 显示器：flex； 证明内容：中心； 对齐项目：居中； 背景：f4efdc； } .show可选{ 位置：绝对位置； 顶部：5px； 左：5px； } .窗户{ 背景：fff； 盒影：0 10像素ccc； 显示器：flex； } 左边 .对{ 填充：20px； flex:100px； } .左{ 显示：无； } .可选{ 背景：eee； 文本对齐：居中； 填充：50px0； } .字{ 显示：内联块； 玛格 in:2px5px； 填充物：3px 5px； 边框：1px实心ddd； 光标：指针； } .隐藏{ 不透明度：0； 订单:99份;； } .wordpool{ 文本对齐：居中； 显示器：flex； } .类别{ 边缘顶部：10px； 边框：1px实心ccc； 最小高度：60px； } .类别.单词{ 显示：块； 文本对齐：居中； 保证金：2倍； } 可选内容

---

---

你想让它的宽度保持不变吗？是的，你可以通过脚本来防止这种情况，脚本会在完成所有操作后设置最小宽度loaded@doutriforce最好的选择是，它的宽度与它在使用时的宽度相同rendered@orzech1080，那么您想通过编程获得它的宽度？它的大小会有所不同？@orzech1080您需要js来解决这个问题。要么在加载和调整大小时添加最小宽度，要么不实际删除元素并将其隐藏。是否希望其宽度保持不变？是的，可以使用脚本防止这种情况，在完成所有操作后设置最小宽度loaded@doutriforce最好的选择是，它的宽度与它在使用时的宽度相同rendered@orzech1080，那么您想通过编程获得它的宽度？它的大小会有所不同？@orzech1080您需要js来解决这个问题。要么在加载和调整大小时添加最小宽度，要么不实际删除元素并将其隐藏。我希望有一个纯CSS解决方案，但我想我必须坚持使用JS:/此解决方案只需要一些调整大小的调整，然后它就应该可以了trick@Huangism无需捕获调整大小事件，我更新了一个更好的解决方案我希望有一个纯CSS解决方案，但我想我必须坚持使用JS:/这个解决方案只需要一些调整大小的调整，然后它就应该可以了trick@Huangism无需关注调整大小事件，我更新了一个更好的解决方案，这也是我最初的想法之一。但这并不适合我，因为在我原来的应用程序中，这些单词实际上是可由第三方插件拖动的，所以我需要在其中添加更多的逻辑，比如克隆而不是拖动，处理“拖动回wordpool”事件等。这不是一个真正的问题，可以在10分钟内完成，但我不知道。。。我想我希望有更干净的解决方案；这也是我一开始的想法之一。但这并不适合我，因为在我原来的应用程序中，这些单词实际上是可由第三方插件拖动的，所以我需要在其中添加更多的逻辑，比如克隆而不是拖动，处理“拖动回wordpool”事件等。这不是一个真正的问题，可以在10分钟内完成，但我不知道。。。我想我希望有更干净的解决方案；

$(".window").css({'max-width':$(".window").width() + 'px','width':'100%'});