div+css三栏自适应宽度布局实例
div+css三栏自适应宽度布局实例

?

1.原理

三栏分为left,center,right,其中left,right用固定宽度分别float:left,right

? ? ? ?然后，加在中间，设置center的padding为相应左右left,right的宽度。

?

2.代码：

? ?html代码

?

    margin: 0px;    padding: 0px;}#header {    clear: both;    height: 50px;    background-color: blue;    margin:0px 5px 5px 5px;    padding: 1px;    color:white;}#left {    float: left;    width: 150px;    background-color: red;    margin:0px 5px;}#right {    float: right;    width: 150px;    background-color: green;    margin:0px 5px;}#middle {    padding: 0px 160px 5px 160px;    margin: 0px;    background-color: silver;    height:300px;    margin:0px 5px;}#footer {    clear: both;    background-color: yellow;    margin:5px 5px 0px 5px;}

?

引用自