CSS實現左右拖拉

html,body{
height:100%;
margin:0;
background-color:#f2f2f2;
}
.left,.right{
box-sizing:border-box;
height:100%;
float:left;
width:50%;
background-color:#fff;
padding:10px;
}
.left{
border-right:1px solid #ccc;
resize:horizontal;
overflow:auto;
}
.right{
resize:vertical;
overflow:auto;
}

以上代碼實現了兩個盒子，左右兩個盒子的寬度均為50%，左盒子可以水平拖動，右盒子可以垂直拖動，代碼解釋如下：

1. 設置body高度為100%，使得左右兩個盒子撐滿整個屏幕。

2. box-sizing屬性設置為border-box，表示盒子大小包括padding和border。

3. 左、右盒子高度為100%，寬度為50%。

4. 左側盒子設置resize:horizontal屬性，可以水平拖動。

5. 右側盒子設置resize:vertical屬性，可以垂直拖動。

6. 盒子overflow屬性設置為auto，當內容溢出時顯示滾動條。