CSS实现页面两列布局与三列布局的方法示例

1. .left {      float: left;   
2.   margin-right: 10px;      width: 100px;   
3.   height: 100px;      background-color: orange;   
4. }    .rightright {   
5.   float: rightright;      margin-left: 10px;   
6.   width: 100px;      height: 100px;   
7.   background-color: orange;    }   
8. .main {      height: 100px;   
9.   background-color: green;      overflow: hidden;   
10. }  

2.双飞翼布局
这种布局方案最早由淘宝提出，主要为了主列能够被最先加载。
实现原理：
（1）让主列外面添加一个wrap，主列wrap，以及2子列都左浮动。
（2）设置主列wrap宽度为100%，将子列的margin-left设置为负值，让子列能够排列在左右两侧。
（3）这是主列的margin-left与margin-right比左右两列的宽度大一点，则可以设置出来主列与子列之间的间隙。
html代码如下
XML/HTML Code复制内容到剪贴板