共计 2589 个字符，预计需要花费 7 分钟才能阅读完成。
想要实现如下图成果，红色可拉动的线往左边拉左边内容区域变大右边内容区域变小，往右边拉左边内容区域变小右边内容区域变大。
咱们先来理解一下 css 的 resize 属性中转 w3s，resize: none|both|horizontal|vertical;能够调整元素是否可左右拖动。
把 W3s 中的 resize 改为 resize:horizontal; 点击运行一下，就只可左右拉动。
接下来咱们把 w3s 里代码改为如下内容，而后点击运行
<!DOCTYPE html>
<html>
<head>
<style>
.container {display: flex;}
.left {position: relative;}
.left .resize {
width: 300px;
resize: horizontal;
overflow: auto;
height: 200px;
}
.content {
position: absolute;
top: 0;
right: 5px;
bottom: 0;
left: 0;
overflow-x: hidden;
}
.right {
width: 200px;
flex: 1;
background: #eee;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="resize"></div>
<div class="content">
吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖
</div>
</div>
<div class="right">a 啊啊啊 </div>
</div>
</body>
</html>诶~ 如同实现了咱们想要的那种成果，然而只能点击右下角拖动，这不是现实成果，所以咱们再来改变一下：
<!DOCTYPE html>
<html>
<head>
<style>
.container {display: flex;}
.left {
position: relative;
height: 200px;
}
.left .resize {
width: 300px;
resize: horizontal;
overflow: scroll;
height: inherit;
opacity: 0;
}
.resize::-webkit-scrollbar {
width: 200px;
height: inherit;
}
.left .bar-btn {
height: 200px;
width: 2px;
background: #666;
position: absolute;
right: 0;
top: 0;
}
.content {
position: absolute;
top: 0;
right: 5px;
bottom: 0;
left: 0;
overflow-x: hidden;
}
.right {
width: 200px;
flex: 1;
background: #eee;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="resize"></div>
<div class="bar-btn"></div>
<div class="content">
吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖
</div>
</div>
<div class="right">a 啊啊啊 </div>
</div>
</body>
</html>上述次要性能是给拖动区域减少了一条竖线，增大了视觉和可拖动区域。应用 ::-webkit-scrollbar {width: 200px; height: inherit;} 让resize右下角拖动按钮高度增大，并 opacity“暗藏”了 resize 拖动按钮。
然而咱们仔细观看发现，当鼠标挪动到可拖动分割线上时，鼠标并不能灵活展现“可拖动”状态，须要往左一点点。这也不是现实成果，所以再来改变：
.left .bar-btn {
position: absolute;
right: 0;
top: 0;
bottom: 0;
border-right: 2px solid #eee;
border-left: 1px solid #bbb;
pointer-events: none;
}这时候鼠标一凑近拖动条就会扭转状态:
接下来给拖动条加一点 css 款式 hover 成果，参考张大神的 css 加上上司代码：
.resize:hover ~ .bar-btn,
.resize:active ~ .bar-btn {border-left: 2px dashed skyblue;}当鼠标 hover 在暗藏的可 resize 区域时扭转可拖动条的款式。点击运行，成果如下：
看样子如同曾经达到咱们想要的成果，可左右拖动并且鼠标悬浮有款式变动。咱们尝试拖动到最右边或者最左边看一下成果：
能够看到拖到最右边没问题，然而拖到左右边的时候松开鼠标发现右内容区域不见了，而且也找不到可拖动竖条。
咱们批改如下两个款式，再来看成果：
.left .resize {max-width: 490px;}
.content {
position: absolute;
top: 0;
/* right: 4px; */
/* bottom: 0; */
/* left: 0; */
z-index: 0;
overflow-x: hidden;
}往最左和最右拉动都不会冲破临界。
如果咱们不想要拖动内容宽度压缩的成果，须要放弃内容宽度不变的话能够批改：
.content {
position: absolute;
top: 0;
/* right: 4px; */
/* bottom: 0; */
/* left: 0; */
z-index: 0;
overflow-x: hidden;
width: 400px;
z-index: 0;
}
.right {
width: 200px;
flex: 1;
background: #eee;
height: 200px;
position: relative;
z-index: 999;
overflow: hidden;
}/ html /
<div class="right">
<div style="width: 2;width: 200px;position: absolute;top: 0;left: 0;right: 0;">
a 啊啊啊
</div>
</div>
张大神的例子 demo 地址地址