左右两栏布局右侧自适应+左右拖动改变两栏宽度

今日的学习心得，愿与各位分享并接受高手们的指教。

我了一种新的布局方式，即左右两栏布局，同时中间有一块可拖动调整宽度的区域。这样的设计使页面更为灵活。

HTML结构非常简单明了，左边一个div，右边一个div，中间是一个可拖动的div。代码如下：

```html

```

在CSS布局方面，我采用了固定绝对定位并设定坐标的方法。虽然这种方法比较直接，但我深知自己的水平有限，还在不断寻求更优雅的方式。相关代码如下：

```css

div,body,html{margin:0; padding:0; width:100%;}

left,right,middle{ height:300px; position:absolute;}

left{width:300px; background:ccc;}

middle{ width:9px; background:666;left:300px;}

middle:hover{ cursor:w-resize;}

right{right:0; background:ccc; left:309px; width:auto;}

```

通过JavaScript实现了中间栏的拖动效果。这使得页面更加动态和交互性。相关代码如下：

```javascript

function $(id) { return document.getElementById(id) }

window.onload = function() {

left = $("left"), right = $("right"), middle = $("middle");

var middleWidth=9;

middle.onmousedown = function(e) {

var disX = (e || event).clientX;

middle.left = middle.offsetLeft;

document.onmousemove = function(e) {

var iT = middle.left + ((e || event).clientX - disX);

var e=e||window.event,tarnameb=e.target||e.srcElement;

maxT=document.body.clientWidth;

iT < 0 && (iT = 0); iT > maxT && (iT = maxT);

middle.style.left = left.style.width = iT + "px";

right.style.width = document.body.clientWidth - iT -middleWidth + "px";

right.style.left = iT+middleWidth+"px";

return false;

};

document.onmouseup = function() {

document.onmousemove = null;

document.onmouseup = null;

middle.releaseCapture && middle.releaseCapture();

};

middle.setCapture && middle.setCapture();

return false;

};

};

cambrian.render('body')

```

希望高手们能对我的代码提出宝贵的意见，我会继续努力学习，不断进步。