image.png

html

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>css实现拖拽布局</title>
  8.   <link rel="stylesheet" href="style.css">
  9. </head>
  11. <body>
  12.   <div class="column">
  13.     <aside class="column-left">
  14.       <div class="resize-bar"></div>
  15.       <div class="resize-line"></div>
  16.       <section class="resize-save">
  17.         左侧的内容，左侧的内容，左侧的内容，左侧的内容
  18.       </section>
  19.     </aside>
  21.     <main class="column-right">
  22.       右侧的内容，右侧的内容，右侧的内容，右侧的内容
  23.     </main>
  24.   </div>
  25. </body>
  26. </html>

css

  1. .column {
  2.   overflow: hidden;
  3. }
  4. .column-left {
  5.   height: 400px;
  6.   background-color: #fff;
  7.   position: relative;
  8.   float: left;
  9. }
  11. .column-right {
  12.   height: 400px;
  13.   padding: 16px;
  14.   background-color: #eee;
  15.   box-sizing: border-box;
  16.   overflow: hidden;
  17. }
  19. .resize-save {
  20.   position: absolute;
  21.   top: 0;
  22.   right: 5px;
  23.   bottom: 0;
  24.   left: 0;
  25.   padding: 16px;
  26.   overflow-x: hidden;
  27. }
  29. .resize-bar {
  30.   width: 200px;
  31.   height: inherit;
  32.   resize: horizontal;
  33.   cursor: ew-resize;
  34.   opacity: 0;
  35.   overflow: scroll;
  36. }
  38. /* 拖拽线 */
  39. .resize-line {
  40.   position: absolute;
  41.   right: 0;
  42.   top: 0;
  43.   bottom: 0;
  44.   border-right: 2px solid #eee;
  45.   border-left: 1px solid #bbb;
  46.   pointer-events: none;
  47. }
  49. .resize-bar:hover~.resize-line,
  50. .resize-bar:active~.resize-line {
  51.   border-left: 1px dashed skyblue;
  52. }
  54. .resize-bar::-webkit-scrollbar {
  55.   width: 200px;
  56.   height: inherit;
  57. }
  59. /* Firefox只有下面一小块区域可以拉伸 */
  60. @supports (-moz-user-select: none) {
  62.   .resize-bar:hover~.resize-line,
  63.   .resize-bar:active~.resize-line {
  64.     border-left: 1px solid #bbb;
  65.   }
  67.   .resize-bar:hover~.resize-line::after,
  68.   .resize-bar:active~.resize-line::after {
  69.     content: '';
  70.     position: absolute;
  71.     width: 16px;
  72.     height: 16px;
  73.     bottom: 0;
  74.     right: -8px;
  75.     background: url(./resize.svg);
  76.     background-size: 100% 100%;
  77.   }
  78. }