Question

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

例如，如果我有四个容器并且我调整了容器2左侧的大小，那么我希望容器1和容器2可以用容器3和4调整大小以不改变。这四个容器在其父div中连续存在，期望调整大小应仅水平发生。四个div的宽度不应超过或小于父容器的总宽度。此外，所有容器上应该有一个最小宽度，限制将相邻元素的大小调整为低于其最小宽度值。

我使用angular-resizable进行了部分实现，但移动容器在使用此方法时正在调整大小。我相信这是因为flex-box实现允许元素的增长和缩小以填充空间，但是如上所述，只要使其工作就会碰壁。

直接从角度可调整大小的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>

Answer 1

我对此的解决方案是从angular-resizable切换到colResizable，这使得表格可以用于我的目的。他们的documentation页面上有一个示例，它描述了我需要的内容。 多范围滑块部分显示了此确切情况的一个很好的示例。希望这可以用于其他人的类似解决方案。

如何创建由容器div约束的多个可重新调整大小的兄弟div元素

1 个答案: