CSS左右拖拽是一種非常常見的交互效果，通常用于實(shí)現(xiàn)拖拽調(diào)整欄目寬度、左側(cè)菜單欄的展開與收縮等功能。以下是一些使用CSS實(shí)現(xiàn)左右拖拽的方法。

/* 1. 使用flexbox布局 */
.container {
display: flex;
}
.left {
width: 200px;
flex-shrink: 0; /* 固定寬度 */
}
.right {
flex-grow: 1; /* 填滿剩余空間 */
}
/* 2. 使用position和calc函數(shù) */
.left {
width: 200px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding-right: 10px; /* 留出拖拽條的空間 */
}
.right {
position: absolute;
left: calc(200px + 10px); /* 左側(cè)寬度 + 拖拽條寬度 */
top: 0;
bottom: 0;
right: 0;
}
.drag {
position: absolute;
left: 200px;
width: 10px;
top: 0;
bottom: 0;
cursor: ew-resize;
}

以上代碼中，第一種方法使用了Flexbox布局，利用了flex-grow屬性自動填充剩余空間的特性，實(shí)現(xiàn)左右拖拽。第二種方法則是利用position定位和calc函數(shù)計(jì)算左右區(qū)域的寬度，同時使用一個拖拽條來控制左側(cè)寬度。

無論使用哪種方法，我們都需要使用JavaScript來實(shí)現(xiàn)實(shí)際的拖拽效果。這里我們可以使用原生JS或者一些拖拽插件，比如jQuery UI或者Draggable。