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

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

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

[HTML讨论组]

912

我有两个并排的div。如果有任何简单的解决方案，允许用户通过拖动来调整两个div的宽度。

如果一个div的宽度增加，另一个div的宽度减少，并保持两个div宽度之和不变。

如果可以使用纯javascript或css实现，那就太好了。欢迎添加任何其他项目，比如div。

两个div的代码如下：

.left {
    float: left;
    width: 49%;
    min-height: 50px;
    border: 2px dashed #f0f
}

.right {
    float: right;
    width: 49%;
    min-height: 50px;
    border: 2px dashed #00f
}

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

感谢任何想法！

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

添加回复

专题推荐

更多>

热门话题

热门教程

更多>