1. 单列布局
2. 两列布局 (float:left/right)
3. 三列 / 多列布局 (圣杯, 双飞翼布局)
4. 圣杯布局
- <div class=artical>
- <div class=middle> 我是中间 </div>
- <div class=left> 我是左边 </div>
- <div class=right> 我是右边 </div>
- </div>
- .artical{
- padding-left:150px;
- padding-right:100px;
- }
- .middle,.left,.right{
- float:left;
- color:#fff;
- }
- .middle{
- width:100%;
- background-color:#bbb;
- }
- .left{
- width:150px;
- background-color:#666;
- margin-left:-100%;
- position:relative;
- left:-150px;
- }
- .right{
- width:100px;
- background-color:#777;
- margin-left:-100px;
- position:relative;
- right:-100px;
- }
双飞翼布局在 middleneibu 添加一个 inner 的 div 类其他没什么变化
来源: http://www.qdfuns.com/article/35782/d0824904245101bc07d5265faf67549c.html