.box {
    width: 100%;
    height: 1000px;
    display: flex;
}
/*×ó²àdivÑùʽ*/
.left {
    width: calc(30% - 5px); /*×ó²à³õʼ»¯¿í¶È*/
    height: 100%;
    /*  background: #36cfc9;*/
    float: left;
}
/*ÍÏקÇødivÑùʽ*/
.resize {
    cursor: col-resize;
    position: relative;
    background-color: yellow;
    width: 5px;
    height: 300px;
    background-size: cover;
    background-position: center;
    font-size: 32px;
    float: left;
}
    /*ÍÏקÇøÊó±êÐüÍ£Ñùʽ*/
    .resize:hover {
        background-color: #444444;
    }
/*ÓÒ²àdiv'Ñùʽ*/
.mid {
    float: left;
    width: 70%; /*ÓÒ²à³õʼ»¯¿í¶È*/
    height: 100%;
    /*background-color: #b7eb8f;*/
}