用户可以通过拖动操作来调整并排div的宽度-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

用户可以通过拖动操作来调整并排div的宽度

P粉690200856 2023-08-28 17:28:25

[HTML讨论组]

769

<p>我有两个并排的div。如果有任何简单的解决方案，允许用户通过拖动来调整两个div的宽度。</p> <p>如果一个div的宽度增加，另一个div的宽度减少，并保持两个div宽度之和不变。</p> <p>如果可以使用纯javascript或css实现，那就太好了。欢迎添加任何其他项目，比如div。</p> <p>两个div的代码如下：</p> <pre class="brush:php;toolbar:false;">.left { float: left; width: 49%; min-height: 50px; border: 2px dashed #f0f } .right { float: right; width: 49%; min-height: 50px; border: 2px dashed #00f }</pre> <pre class="brush:php;toolbar:false;"><div class="right"></div> <div class="left"></div></pre> <p>感谢任何想法！</p>

P粉690200856

全部回复(1)

P粉0200855992023-08-29 10:12:03 1楼

出于好奇，我创建了一个小试验，并发现使用一个主要的弹性盒容器 .wrapper 来包含 .left 和 .right 元素，并让 弹性盒机制 完成艰巨的工作更容易实现。

两件事：

当使用 resize 时，属性 overflow 需要设置为 auto 以使手柄可见（在 Windows Firefox 和 Chrome/Edge 上测试通过）。
选择一个可以调整大小并拥有手柄的子元素，我选择了 .left。因为它们是弹性盒子的子元素，所以在另一个元素上使用 flex: 1（.right）时，弹性盒机制 将使该元素跟随调整大小的元素的大小，并填充任何剩余空间。

MDN 参考：resize

/* 用于轻松调整 .right 大小的弹性盒容器 */
.wrapper { display: flex }

.left, .right {
    /* 初始大小，浏览器将记住上次状态直到页面重新加载 */
    width: 50%;
    min-height: 50px; /* 至少要有一些内容显示 */
    min-width : 50px;
}

.left {
    overflow: auto; /* 必须使手柄可见 */
    resize: both;   /* 启用双向调整大小 */
           /* 在单个方向上使用 horizontal/vertical */
}

.right {
    flex: 1; /* 将填充剩余的水平/垂直空间 */
}

/* 美化 */
.left  { border: 2px dashed #f0f }
.right { border: 2px dashed #00f }

<div class="wrapper">
    <div class="left" ></div>
    <div class="right"></div>
</div>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>