DIV+CSS 网页布局第三篇：三列布局
1、 宽 度自适应三列布局
三列布局的原理和两列布局的原理是一样的，只 不过 多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。
同样的道理，更多列的布局，其实和两列、三列的布局模式是一样的。
XM L/HT ML Code 复制内容到剪贴板
<!DOCTY PE &nbs p; html > < html > < head > < meta charset = "UTF-8" > < t IT le > 三列布局 </ title > < style > *{m arg in:0;padding:0;} # herder{ h ei ght:50px; background:blue; } #m ai n{ width:100%; overflow:hidden; } #main .main-left{ width:25%; height:800px; background: red ; float:left; } #main .main- center { width:50%; height:800px; background:lightgreen; float:left; } #main .main-right{ width:25%; height:800px; background:pink; float:right; } #footer{ height:50px; background:gray; } </ style > </ head > < body > < div id = "herder" > 页头 </ div > < div id = " ;m ain" > < div class = "main-left" > 左列 </ div > < div class = "main-center" > 中间 </ div > < div class = "main-right" > 右列 </ div > </ div > < div id = "footer" > 页脚 </ div > </ body > </ html >
2、左右两列固定宽度，中间内容宽度自适应
要想实现左右两列固定宽度，中间宽度自适应的布局，那么使用浮动就做不到了，使用浮动之后页面就乱了，必须使用绝对定位来将三列固定在一行。
XML/HTML Code 复制内容到剪贴板
<!DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > 两边固定中间自适应布局 </ title > < style > *{mar gin :0;padding:0;} #herder{ height:50px; background:blue; } #main{ width:100%; position:relative; } #main .main-left{ width:200px; height:800px; background:red; position:absolute; left:0; top:0; } #main .main-center{ height:800px; background:lightgreen; margin:0 310px 0 210px; } #main .main-right{ width:300px; height:800px; background:pink; position:absolute; right:0; top:0; } #footer{ height:50px; background:gray; } </ style > </ head > < body > < div id = "herder" > 页头 </ div > < div id = "main" > < div class = "main-left" > 左列 </ div > < div class = "main-center" > 设计网页的第一步就是设计版面布局，搭建 网站结构 ，网页排版的合理性，在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此，网站首页第一屏的排版非常 重要 ，很多时候能决定用户的去与留。 </ div > < div class = "main-right" > 右列 </ div > </ div > < div id = "footer" > 页脚 </ div > </ body > </ html >
以上就是本文的全部内容，希望对大家的学习有所帮助。
原文： http://www.cnblogs.com/Mtime/p/5272716.html
总结
以上是 为你收集整理的 学习DIV+CSS网页布局之三列布局 全部内容，希望文章能够帮你解决 学习DIV+CSS网页布局之三列布局 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于学习DIV+CSS网页布局之三列布局的详细内容...