学习前端有段时间了，对于页面布局总是采用类似于这种的方式
1 <div class="header"></div> 2 <div class="main"> 3 <div class="content"></div> 4 <div class="side"></div> 5 </div> 6 <div class="footer"></div>姑且不论好坏大家都在使用各种布局感觉如果不用的话就有点out，所以研究了一下关于css的布局相关知识，在这里总结一下。
双飞翼布局优缺点：
优点
实现了内容与布局的分离，即Eric提到的Any-Order Columns.main部分是自适应宽度的，很容易在定宽布局和流体布局中切换。任何一栏都可以是最高栏，不会出问题。需要的hack非常少（就一个针对ie6的清除浮动hack:_zoom: 1;）在浏览器上的兼容性非常好，IE5.5以上都支持。不足
main需要添加一个额外的包裹层
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>测试双飞翼布局</title> <style> .page { width: 980px; height: 500px; } .body { height:300px; padding: 0 230px 0 190px; } .header,.footer{ width: 100%; height: 25px; background-color: #999; } .main { background:#D6D6D6; float:left; width:100%; height: 300px; } .left { background:#E79F6D; float:left; width:190px; margin-left:-100%; height: 300px; position:relative; left:-190px; } .right { background:#7BD; float:left; width:230px; margin-left:-230px; height: 300px; position:relative; right:-230px; } </style> </head> <body> <div class="page"> <div class="header">这里是头部</div> <div class="body"> <div class="main"> 这里是主体内容 </div> <div class="left">这里是侧边栏一</div> <div class="right">这里是额外内容</div> </div> <div class="footer">这里是底部</div> </div> <body> <html>
栅格布局的原理可以通过以下的一张图片表示出来(网上copy来的)
几种比较常用的栅格系统css框架
http://www.megong.com/2011/0302/1458.html
960
http://960.gs/
bootstrap
http://v2.bootcss.com/scaffolding.html#gridSystem
转载于:https://www.cnblogs.com/iori20091101/p/4235527.html
相关资源：如何做出双飞翼布局与圣杯布局