关于左右两列布局和上下两列布局的解决方案

效果:　　

　　左边固定宽度, 右边宽度自适应

　　右边容器中上边固定高度, 下边高度自适应

实现方法及原理:

　　1 左边高度100%, 固定宽度, 设置为左浮动布局

　　2 右边设置overflow为hidden, 开启BFC, 消除浮动对布局的影响, 利用宽度自动扩张, 是其宽度自适应

　　3 右边容器中, 固定上层容器的高度

　　4 将下层的元素设置为怪异盒模型, 并设置padding-bottom为上层容器的高度

代码实现如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Title</title>
 6   <style type="text/css">
 7     .wrapper{
 8       height: 500px;
 9       width: 500px;
10       position: relative;
11       background: pink;
12     }
13     .left{
14       height: 500px;
15       width: 150px;
16       float: left;
17       background: yellowgreen;
18     }
19     .right{
20       height: 100%;
21       overflow: hidden;
22       background: yellow;
23     }
24     .top{
25       height: 150px;
26       background: pink;
27     }
28     .bottom{
29       height: 100%;
30       padding-bottom: 150px;
31       box-sizing: border-box;
32       background: blue;
33     }
34 
35   </style>
36 </head>
37 <body>
38 <div class="wrapper">
39   <div class="left"></div>
40   <div class="right">
41     <div class="top"></div>
42     <div class="bottom"></div>
43   </div>
44 </div>
45 </body>
46 </html>