<body> <div class="app"> <div class="left"> asdf </div> <i class="line"></i> <div class="right"> asdfasdfsadf </div> </div> </body> <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>xxxxxxxxxx* { margin: 0; padding: 0; } .app { display: flex; } .left, .right { position: absolute; top:0; bottom:0; left:0; user-select: none; } .left{ width: 50%; } .right{ left:50%; right:0; } .line { position: absolute; top: 0; bottom: 0; width: 4px; background: #ddd; left: 50%; margin-left: -2px; z-index: 999; cursor: col-resize; } $(function() { var move = false; //移动标记 $(".line").mousedown(function(e) { move = true; }); $(document).mousemove(function(e) { if (move) { var x = e.pageX; $('.left').css('width',x+'px') $('.right').css('left',x+'px') $('.line').css('left',x+'px') } }) $(document).mouseup(function() { move = false; }); })