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

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

结构:

1 <div id="nav">内容</div>
2 <div id="sidebar">内容</div>
3 <div id="main"> 内容 </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;}

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

posted @ 2011-09-02 16:06  随水常流  阅读(469)  评论(0编辑  收藏  举报