html分栏左中右,css页面中常见左中右分栏布局的两种实现方式

以下代码复制粘贴即可使用：

示例一：

复制代码代码如下:

.page_center {

width:100%;

}

#nav {

background-color:red;

height:20px;

}

#left {

width:120px;

background-color:green;

position:absolute;

}

#middle {

background-color:yellow;

}

#right {

width:120px;

background-color:green;

position:absolute;

top:0;

right:0;

}

#foot {

background-color:pink;

}

#main {

position:relative;

}

上边

左边

中间部分

右边

底边

示例2：

复制代码代码如下:

Untitled Document

#left{

float:left; width:240px; height:500px; background:#0C9;

}

#right{

float:right;width:240px;height:500px; background:#933;

}

#center{

height:500px;background:#06C;

}

左边

右边

中间

复制代码代码如下: