横向两列布局（左列固定，右列自适应）的4种CSS实现方式

方法一（推荐）：使用asolute属性实现，需要注意：固定宽的列的高度>自适应宽度列的高度

CSS代码：

1. body{   
2.     margin:0;   
3.     padding:0;   
4.     font-size:30px;   
5.     font-weight:bold;       
6. }   
7. .parent{   
8.     text-align:center;   
9.     line-height:200px;   
10. }       
11. .side{   
12.     position:absolute;left:0;top:0;   
13.     width:200px;   
14.     height:200px;   
15.     background:red;   
16. }   
17. .main{   
18.     margin-left:210px;   
19.     background:blue;   
20.     height:200px;   
21. }  

方法二：通过设置float属性（使纵向排列的块级元素，横向排列）及margin属性（设置两列之间的宽度）

CSS代码：

1. body{   
2.     margin:0;   
3.     padding:0;   
4.     font-size:30px;   
5.     font-weight:bold;       
6. }   
7. .parent{   
8.     text-align:center;   
9.     line-height:200px;   
10. }   
11. .side{   
12.     width:200px;   
13.     height:200px;   
14.     float:left;   
15.     background:red;   
16. }   
17. .main{   
18.     height:200px;   
19.     margin-left:210px;   
20.     background:blue;   
21. }  

方法三：使用Flex布局

CSS代码：

1. body{   
2.         margin:0;   
3.         padding:0;   
4.         font-size:30px;   
5.         font-weight:bold;       
6.     }   
7.     .parent{   
8.         text-align:center;   
9.         line-height:200px;   
10.         display:flex;   
11.     }    
12.     .side{   
13.         width:200px;   
14.         height:200px;   
15.         background:red;   
16.         margin-right:10px;   
17.     }   
18.     .main{   
19.         background:blue;   
20.         height:200px;   
21.         flex:1;   
22.     }​    

方法四：利用BFC不与浮动元素重叠的特性

CSS代码：

1.  body{   
2.     margin:0;   
3.     padding:0;   
4.     font-size:30px;   
5.     font-weight:bold;       
6. }   
7. .parent{   
8.     text-align:center;   
9.     line-height:200px;   
10. }   
11. .side {   
12.   width: 200px;   
13.   height: 100px;   
14.   float: left;   
15.   background: red;   
16.   margin-right: 10px;   
17. }   
18. .main {   
19.     
20.   overflow: hidden;   
21.   background: blue;   
22.   height: 100px;   
23. }   

以上就是本文的全部内容，希望对大家熟练掌握CSS布局技巧有所帮助。

更多阅读内容：

学习DIV+CSS网页布局之一列布局

学习DIV+CSS网页布局之两列布局

学习DIV+CSS网页布局之三列布局

学习DIV+CSS网页布局之混合布局