小编Aqu*_*azi的帖子

我在一个独特的容器div(下面的代码和小提琴)中有2个盒子和一个垂直div线.

我正在使用CSS网格将我的元素放在容器中

我想要完成的是使用垂直线根据垂直线的位置水平调整两个框的大小.

我很抱歉,如果问题是noobish,我是网络开发的新手,之前只使用过Python,已经尝试过google和stackoverflow搜索,但所有解决方案看起来都过于复杂,而且通常需要额外的库,我只是寻找更简单的东西和JS.

HTML:

<div class="wrapper">
  <div class="box a">A</div>
  <div class="handler"></div>
  <div class="box b">B</div>
</div>

CSS:

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 8px 200px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  resize: both;
}

.handler{
    width: 3px;
    height: 100%;
    padding: 0px 0;
    top: 0;
    background: red;
    draggable: true;
}

https://jsfiddle.net/gv8Lwckh/6/