js+css+html

思路一：实现下边三栏左侧和右侧是窗口状态可以拖动伸缩
思路二：实现下面三栏中间一栏可调节宽度

可以使用CSS Grid或者Flexbox布局来实现这两个需求。

实现左侧和右侧的窗口状态可以拖动伸缩：
可以使用JavaScript来监听拖动事件，并修改相应的样式。
可以使用CSS grid-template-columns属性来定义网格布局的列的大小，并通过JavaScript修改列的大小以实现拖动伸缩的效果。
实现中间一栏可调节宽度：
可以使用CSS grid-template-columns属性来定义网格布局的列的大小，并通过JavaScript修改列的大小以实现调节宽度的效果。
可以使用Flexbox布局，并使用JavaScript来监听拖动事件，修改flex-basis属性实现调节宽度的效果。

思路一：

您可以使用CSS的Flexbox布局实现左右两栏可伸缩，并且可以使用JavaScript监听鼠标拖动事件，并动态更新左右两栏的宽度。

HTML代码：

<div class="container">
  <div class="left-column"></div>
  <div class="middle-column"></div>
  <div class="right-column"></div>
</div>

CSS代码：

.container {
  display: flex;
}

.left-column {
  width: 200px;
}

.middle-column {
  flex: 1;
}

.right-column {
  width: 200px;
}

JavaScript代码：

const leftColumn = document.querySelector('.left-column');
const rightColumn = document.querySelector('.right-column');

leftColumn.addEventListener('mousedown', handleMouseDown);
rightColumn.addEventListener('mousedown', handleMouseDown);

let isDragging = false;
let currentX;
let initialLeftWidth;
let initialRightWidth;

function handleMouseDown(e) {
  isDragging = true;
  currentX = e.clientX;
  initialLeftWidth = leftColumn.offsetWidth;
  initialRightWidth = rightColumn.offsetWidth;
  document.addEventListener('mouseup', handleMouseUp);
  document.addEventListener('mousemove', handleMouseMove);
}

function handleMouseUp() {
  isDragging = false;
  document.removeEventListener('mouseup', handleMouseUp);
  document.removeEventListener('mousemove', handleMouseMove);
}

function handleMouseMove(e) {
  if (!isDragging) {
    return;
  }
  const deltaX = e.clientX - currentX;
  const newLeftWidth = initialLeftWidth + deltaX;
  const newRightWidth = initialRightWidth - deltaX;
  leftColumn.style.width = newLeftWidth + 'px';
  rightColumn.style.width = newRightWidth + 'px';
}

思路二：

您可以使用JavaScript监听鼠标拖动事件，并动态更新中间列的宽度。

HTML代码：

<div class="container">
  <div class="left-column"></div>
  <div class="middle-column"></div>
  <div class="right-column"></div>
</div>

CSS代码：

.container {
  display: flex;
}

.left-column {
  width: 200