Javascript 隐藏孩子<；部门>；当父div收缩时，会发生什么？

我正在尝试在使用jqueryUI滑块制作的web应用程序上编写放大/缩小功能

当我的父div收缩过多，并挤压其子容器时，我很难处理

   <div class="puck originator inline-block" style="width: 310.5px; left: 0px;">
    <div class="conflicted inline-block originator">
        <div class="right-number">I should stay</div>
        <div class="left-number">I should stay</div>
        <div class="middle-number">I Should disapper</div>
    </div>
</div>

我应该留下
我应该留下
我应该消失

这是我的代码的相关部分

基本上，我有一个父div（类'puck'），它正在使用jquery滑块进行收缩。对于这段代码，我只使用了一个文本框，但想法相同

当我收缩那个div时，包含的div会粘在一起，非常混乱

我希望能够删除中间的子div，当它变得拥挤时，留下左、右子div来占据所有空间

此外，如果在那之后它变得狭窄，我想移除右边的div，只留下左边的div

最后，我希望能够删除所有内容，以便只显示父对象的背景

有没有一种方法可以轻松做到这一点，最好是通过CSS？我不想编写更多的javascript代码来在每个子div上设置“display:none”，因为似乎有些CSS规则应该处理这个问题

---

有什么想法吗？

CSS中并没有任何逻辑来处理这样的事情。您可以根据视口大小设置规则，但在这种情况下这没有帮助

我用这段代码更新了你的代码，这样你就可以测试它，看看你的想法，但实际上我只是在你的javascript函数中添加了一些检查，根据提交的宽度来隐藏

    var newwidth = $('#text').val();
    $(".middle-number").show();   
    $(".right-number").show();  
    if (newwidth < 280) {
         $(".middle-number").hide();   
    }
    if (newwidth < 180) {
         $(".right-number").hide();   
    }
    $('.puck').css('width',newwidth);

var newwidth=$（'#text'）.val（）；
$（“.middle number”）.show（）；
$（“.right number”）.show（）；
如果（新宽度<280）{
$（“.middle number”）.hide（）；
}
如果（新宽度<180）{
$（“.right number”）.hide（）；
}
$（'.puck'）.css（'width'，newwidth）；

您不能缩小/扩大字体大小吗？放大/缩小时？css

溢出：隐藏应该可以做到这一点。下面是一个使用与@MochDaear类似的逻辑，但使用
resize（）
事件作为触发器的示例。谢谢大家的帮助！然而，这个解决方案的问题是，我在应用程序上有近100-200个这样的“冰球”，并且所有的冰球都被调整了大小，所以我担心在这么多的冰球上执行这种逻辑会影响性能，特别是因为ie有一个如此糟糕的javascript引擎。