css常见三列布局方案

css常见三列布局方案

一、固定宽度三列布局

1. <divid="wrapper">
2. <divid="header">header</div>
3. <divid="container"class="cls">
4. <divid="aside">
5. <divclass="inner">
6. aside
7. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
8. </div>
9. </div>
10. <divid="content"class="cls">
11. <divid="main">
12. <divclass="inner">
13. main
14. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
15. </div>
16. </div>
17. <divid="content-aside">
18. <divclass="inner">
19. content-aside
20. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
21. </div>
22. </div>
23. </div>
24. </div>
25. <divid="footer">footer</div>
26. </div>

1. #header{ width: 980px; height: 90px; margin: 0 auto; background: #f60;}
2. #container{ width: 980px; margin: 0 auto;}
3. #aside{ float: left; width: 240px; background: #ccc;}
4. #content{ margin-left: 240px;}
5. #main{ float: left; width: 540px; background: pink;}
6. #content-aside{ float: left; width: 200px; background: orange; }
7. #footer{ width: 980px; height: 90px; margin: 0 auto; background: #08f;}

点击查看demo

二、自适应宽度三列布局

1. <divid="wrapper">
2. <divid="header">header</div>
3. <divid="container"class="cls">
4. <divid="aside">
5. <divclass="inner">
6. aside
7. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
8. </div>
9. </div>
10. <divid="content"class="cls">
11. <divid="main">
12. <divclass="inner">
13. main
14. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
15. </div>
16. </div>
17. <divid="content-aside">
18. <divclass="inner">
19. content-aside
20. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
21. </div>
22. </div>
23. </div>
24. </div>
25. <divid="footer">footer</div>
26. </div>

1. #header{ width: 96%; height: 90px; margin: 0 auto; background: #f60;}
2. #container{ width: 96%; margin: 0 auto;}
3. #aside{ float: left; width: 240px; background: #ccc;}
4. #content{ margin-left: 240px;}
5. #main{ float: left; width: 100%; background: pink;}
6. #main .inner{ padding-right: 200px;}
7. #content-aside{ float: left; width: 200px; margin-left: -200px; background: orange; }
8. #footer{ width: 96%; height: 90px; margin: 0 auto; background: #08f;}

点击查看demo

 

相关文章

【迟早得学】CSS3特效之透明:rgba

【迟早得学】CSS3特效之文字阴影:text-shadow

【迟早得学】CSS3特效之盒阴影:box-shadow

【迟早得学】CSS3特效之渐变:linear-gradient

【迟早得学】CSS3特效之转换:transform

【迟早得学】CSS3特效之过渡:transition

【迟早得学】CSS3特效之动画:animation

【总结】怎样用css实现图片垂直居中(兼容IE6/IE7)

【总结】css常见两列布局方案

【总结】css常见三列布局方案

【jquery】简单选项卡插件开发实战

【jquery】简单轮播图(焦点图)插件开发实战

【jquery】placeholder插件开发实战