如何创建多个受容器 div 约束的可调整大小的同级 div 元素

Posted 2023-02-16

【中文标题】如何创建多个受容器 div 约束的可调整大小的同级 div 元素

【英文标题】：How to create multiple re-sizable sibling div elements that are constrained in by a container div

【发布时间】：2018-01-25 15:30:54

【问题描述】：

我正在使用 angularjs 并尝试创建一个包含四个可调整大小的容器的 div。我希望这些容器以这样的方式调整大小，即改变容器的大小会改变相邻容器的宽度，但不会改变同一父 div 中的其他容器。

例如，如果我有四个容器并且我调整了容器 2 左侧的大小，那么我希望容器 1 和容器 2 的大小随着容器 3 和 4 的变化而不会改变。这四个容器在它们的父 div 中连续存在，期望调整大小只能水平发生。四个 div 的宽度不得超过或小于父容器的总宽度。此外，所有容器都应该有一个最小宽度，限制将相邻元素的大小调整到低于其最小宽度值。

我有一个使用angular-resizable 的部分实现，但是在使用这种方法时移动容器正在调整大小。我相信这是由于 flex-box 实现允许元素的增长和收缩以填充空间，但在如上所述的工作中遇到了障碍。

直接从 angular-resizable api 页面提取和修改代码以生成此示例。 https://codepen.io/CodeRequiem/pen/NXVVKB 调整大小完全符合我的要求，但没有遵守对 min-width 的限制，并且在某些调整大小时元素被推到父容器之外存在一些问题。

<div class="row">
    <section id="one" resizable r-directions="['right']" r-flex="true">
        <p>Schedule part 1</p>
    </section>
    <section id="two" resizable r-directions="['right']" r-flex="true">
        <p>Schedule part 2</p>
    </section>
    <section id="three" resizable r-directions="['right']" r-flex="true">
        <p>Schedule part 3</p>
    </section>
    <section id="four">
        <p>Schedule part 4</p>
    </section>
</div>

【问题讨论】：

与问题相关的详细信息不应包含在 cmets 中，因为它们可以被删除。理想情况下，问题是独立的。您能否引用代码的相关部分，以便根据上下文将所有内容都放在一个地方？

【参考方案1】：

我对此的解决方案是从 angular-resizable 切换到 colResizable，这提供了一个使用适用于我的目的的表的实现。在他们的documentation 页面上有一个示例，它准确地描述了我需要什么。 多范围滑块部分展示了这种情况的一个很好的例子。希望这可以用于其他人的类似解决方案。