【css】左右拖拽布局

参考：纯CSS实现左右拖拽改变布局大小使用CSS3中resize属性水平,垂直拖动元素,改变大小、纯CSS实现可拖动布局

场景

希望左侧目录树可以向右拖拽，使得较长的文字可以横向显示。
在这里插入图片描述

在这里插入图片描述

解决

利用resize: horizontal;和overflow: scroll;实现。

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>拖拽布局title>
    <style type="text/css">
      .container {
        overflow: hidden;
      }
      .container-left {
        height: 100vh; /* 页面高度拉满 */
        background-color: #fff;
        position: relative;
        float: left;
      }
      .container-right {
        height: 100vh;
        background-color: #fff;
        box-sizing: border-box;
        overflow: scroll;
      }
      .resize-save {
        position: absolute;
        top: 0;
        right: 2px;
        bottom: 0;
        left: 0;
        border-width: 1px 1px 0 1px;
        border-color: #f0f0f0;
        border-style: solid;
      }
      .resize-bar {
        width: 200px;
        min-width: 200px;
        max-width: 400px;
        height: inherit;
        resize: horizontal; /* 关键点 */
        cursor: ew-resize;
        cursor: col-resize;
        opacity: 0;
        overflow: scroll; /* 关键点 */
      }
      /* 拖拽线 */
      .resize-line {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        border-right: 2px solid #f0f0f0;
        border-left: 1px solid #f0f0f0;
        pointer-events: none;
      }
      .resize-bar:hover ~ .resize-line,
      .resize-bar:active ~ .resize-line {
        border-left: 2px dashed #f0f0f0;
      }
      .resize-bar::-webkit-scrollbar {
        width: 200px;
        height: inherit;
      }
    style>
  head>
  <body>
    <div class="container">
      <div class="container-left">
        <div class="resize-bar">div>
        <div class="resize-line">div>
        <div class="resize-save">
          左侧的内容，左侧的内容，左侧的内容，左侧的内容
        div>
      div>
      <div class="container-right">
        右侧的内容，右侧的内容，右侧的内容，右侧的内容
      div>
    div>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

在这里插入图片描述

引申出的其它问题：左右侧区域分开滚动，注意查看 height 和 overflow 是否被覆盖，重新为元素设置好 height 和 overflow 值。

相关阅读:
MySQL进阶篇4——锁+InnoDB引擎+MySQL管理
vue3中使用el-upload + tui-image-editor进行图片处理
Spring常用注解。
本地私域线上线下线上和线下的小程序
基于C#实现的在线聊天室的桌面系统软件
无人机倾斜摄影技术在测绘领域的应用
Linux Gnome桌面无法打开终端Terminal
Java之多线程
嵌入式系统开发笔记89：认识AVR微控制器系统架构
Android图片一直在另一张图的下边

原文地址：https://blog.csdn.net/weixin_43973415/article/details/127569144