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;}
?
引用自