html实现页面左中右布局,可扩展性的页面布局：左右结构， 左中右结构

左右结构，左边100%；右边宽度固定

css

#header{height:80px; background:#CCC;}

#center{overflow:hidden; zoom:1;}

#main_wrapper{float:left; width:100%; margin-top:10px; margin-left:-210px;}

#main{height:200px; margin-left:210px; background:#999;}

#sidebar{float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}

#footer{height:50px; margin-top:10px; background:#CCC;}

HTML

左右结构，左边固定，右边100%

css

#header{height:80px; background:#CCC;}

#center{overflow:hidden; zoom:1;}

#sidebar{float:left; width:200px; margin-top:10px; height:200px; background:#AAA;}

#main_wrapper{float:right; width:100%; margin-top:10px; margin-left:-210px;}

#main{height:200px; margin-left:210px; background:#999;}

#footer{height:50px; margin-top:10px; background:#CCC;}

html

左中右结构，左边固定，右边固定，中间100%;

css

#header{height:80px; background:#CCC;}

#center{overflow:hidden; zoom:1;}

#sidebar-l {float:left; width:200px; margin-top:10px; height:200px; background:#AAA;}

#main-wrapper {margin-top:10px; float:left; width:100%; margin-left:-420px; height:200px;}

#main {margin-left:438px; background:#999; height:200px;}

#sidebar-r {float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}

#footer{height:50px; margin-top:10px; background:#CCC;}

html