I have two divs side by side. If there is any simple solution, allow the user to resize the width of both divs by dragging.
If the width of one div increases, the width of the other div decreases, keeping the sum of the widths of the two divs unchanged.
It would be great if it could be implemented using pure javascript or css. Feel free to add any other items like divs.
The codes for the two divs are as follows:
.left { float: left; width: 49%; min-height: 50px; border: 2px dashed #f0f } .right { float: right; width: 49%; min-height: 50px; border: 2px dashed #00f } Thanks for any ideas!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Out of curiosity, I created a little experiment and discovered using a main flexbox container
.wrapperto contain.leftand.rightelements and make the hard work ofFlexbox Mechanismeasier to implement.Two things:
resize, the propertyoverflowneeds to be set toautoto make thehandlevisible (in Windows Firefox and Chrome/Edge The above test passed)..left. Because they are children of the flexbox, when usingflex: 1(.right) on another element, theflexbox mechanismwill make that element Follows the size of the resized element and fills any remaining space.MDN Reference: 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 }