常用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;}
利用浮动,让左层左浮动,右层右浮动,然后中间的层会自动到中间去,这种三列布局的结构只能是左右中,否则布局会乱,达不到想要的结果。