css 两个div可拖动大小

CSS是一种用于网页布局和样式的语言，其中引人注目的功能之一是可以让元素可拖动。本文介绍如何使用CSS让两个DIV可拖动大小。

    .container{
      display:flex;
      height: 400px;
      width: 800px;
      border: 1px solid black;
}
.left{
      width: 50%;
      min-width: 300px;
      background-color: lightblue;
      resize: horizontal;
      overflow:auto;
}
.right{
      width: 50%;
      background-color: pink;
      resize: horizontal;
      overflow:auto;
}
    

首先，请注意外部容器的样式。我们想要两个DIV可以水平调整大小，因此选择使用flexbox来排列它们。这意味着我们可以使用flex属性来定义容器的高度和宽度。

然后，我们分别为左右两个DIV添加样式。重要的是要注意设置最小宽度和resize属性。使用resize属性，用户可以通过拖动DIV的边框来调整其大小。

最后，我们还需要添加overflow:auto; 到DIV的样式中，以防止内容溢出。

现在，我们已经学会了如何通过CSS使两个DIV可拖动大小。这为我们的网页布局带来了更大的灵活性，让我们可以更好地适应各种屏幕大小。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！