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

今天一下午的学习成果，分享一下，欢迎高手指教。

首先是布局，左右两栏布局，中间留出可拖动的地方。布局很简单，左边一个div，右边一个div，中间的div是用来拖动的。

复制代码代码如下:

左右两栏拖动改变宽度

左侧内容

右侧内容

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;}

最后的js实现中间栏的拖动效果：

复制代码代码如下:

function $(id) {

return document.getElementById(id)

}

window.onload = function() {

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