css三栏布局可拖动

在网页设计中，经常需要使用三栏布局，其中一个栏固定在页面顶部或底部，另外两个栏则在其左右两侧。而且，我们可能希望用户可以通过拖动来改变栏的大小及其位置。这种布局可以通过CSS实现。

首先，我们需要HTML结构来定义我们的三栏布局。下面是一个简单的实例：

<div class="wrapper">
  <div class="column column1">
    <p>这是左边的栏.</p>
  </div>
  <div class="column column2">
    <p>这是中间的栏.</p>
  </div>
  <div class="column column3">
    <p>这是右边的栏.</p>
  </div>
</div> 

在这个示例中，每个栏都有一个类，我们可以使用CSS来定位和定制这些栏。我们还添加了一个外层包装器，以便于整个布局可以在页面上移动。

下面是CSS样式的例子：

.wrapper {
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
}

.column {
  height: 100%;
  position: relative;
}
 
.column1 {
  width: 120px;
  background-color: #ddd;
}
 
.column2 {
  flex: 1;
  background-color: #eee;
}
 
.column3 {
  width: 240px;
  background-color: #ddd;
}

.column1:hover {
  cursor: w-resize;
}

.column2:hover {
  cursor: move;
}

.column3:hover {
  cursor: e-resize;
} 

在这个CSS样式中，我们使用了flexbox来布局三个栏。wrapper类设置为flex容器，其子元素按行（row）排列（flex-direction），不换行（flex-wrap:nowrap）。我们还使用overflow属性隐藏横向溢出部分。

每个栏都有position:relative，以便我们可以在其上面定位和移动元素。然后，我们可以通过设置栏的宽度或使用flex-grow属性来设置栏的宽度。最后，我们添加了一些简单的:hover样式，使得当我们将鼠标悬停在栏上时，鼠标样式发生变化，以表明可以拖动栏。我们可以使用JavaScript或jQuery等自定义交互来使拖放成为可能。

总之，CSS三栏布局可拖动并不是很难实现，而且可以使得网页设计更加灵活，易于交互。通过使用CSS布局和JavaScript交互，我们可以为用户提供优良的视觉和交互体验。