常用div+css三列布局结构与样式,一

三列布局很常见,通常是左右两列宽度固定,然后中间内容自适应。

结构:

1 <div >内容</div>
2 <div >内容</div>
3 <div > 内容 </div>

样式:

1 #nav{ float:left; margin-right:10px; overflow:hidden; width:15%; background:blue; height:200px;}
2 #sidebar{ float:right; margin-left:10px; width:20%; overflow:hidden; background:yellow; height:200px;}
3 #main{ overflow:hidden; background:red; height:200px;}

利用浮动,让左层左浮动,右层右浮动,然后中间的层会自动到中间去,这种三列布局的结构只能是左右中,否则布局会乱,达不到想要的结果。