div宽度拖动``` 111 333 ``` ![image.png](https://p3-juejin.byteim

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <style>
        body,html{
            margin:0;
            padding:0;
            height:100%;
        }
        #box{
            width:600px;
            height:500px;
            overflow:hidden;
        }
        #left{
            width:calc(30% - 5px);
            height:100%;
            background:skyblue;
            float:left;
        }

        #resize{
            width:5px;
            height:100%;
            cursor: w-resize;
            float:left;
        }

        #right{
            float:right;
            width:70%;
            height:100%;
            background:tomato;
        }
    </style>


</head>
<body>



<div id="box">
    <div id="left">111</div>
    <div id="resize"></div>
    <div id="right">333</div>
</div>
</body>
<script>
    window.onload = function(){
        var resize = document.getElementById("resize");
        var left = document.getElementById("left");
        var right = document.getElementById("right");
        var box = document.getElementById("box");
        resize.onmousedown = function(e){
            var startX = e.clientX;
            resize.left = resize.offsetLeft;
            document.onmousemove = function(e){
                var endX = e.clientX;

                var moveLen = resize.left + (endX - startX);
                var maxT = box.clientWidth - resize.offsetWidth;
                if(moveLen<150) moveLen = 150;
                if(moveLen>maxT-150) moveLen = maxT-150;

                resize.style.left = moveLen;
                left.style.width = moveLen + "px";
                right.style.width = (box.clientWidth - moveLen - 5) + "px";
            }
            document.onmouseup = function(evt){
                document.onmousemove = null;
                document.onmouseup = null;
                resize.releaseCapture && resize.releaseCapture();
            }
            resize.setCapture && resize.setCapture();
            return false;
        }
    }


</script>
</html>