左侧固定，右侧自适应的三种布局方式

方法1：

 1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>Document</title>
 7         <style>
 8             .one {
 9                 position: absolute;
10                 height: 200px;
11                 width: 300px;
12                 background-color: blue;
13             }
14             
15             .two {
16                 height: 200px;
17                 margin-left: 300px;
18                 background-color: red;
19             }
20         </style>
21     </head>
22 
23     <body>
24         <div class="one"></div>
25         <div class="two">第一种方法</div>
26     </body>
27 
28 </html>

方法2：

 1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>Document</title>
 7         <style>
 8             .one {
 9                 float: left;
10                 height: 200px;
11                 width: 300px;
12                 background-color: blue;
13             }
14             
15             .two {
16                 overflow: auto;
17                 height: 200px;
18                 background-color: red;
19             }
20         </style>
21     </head>
22 
23     <body>
24         <div class="one"></div>
25         <div class="two">第二种方法</div>
26     </body>
27 
28 </html>

方法3：

 1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8         <style>
 9             * {
10                 padding: 0;
11                 margin: 0;
12             }
13             
14             #oo {
15                 display: flex;
16                 flex-wrap: wrap;
17             }
18             
19             .one {
20                 float: left;
21                 height: 200px;
22                 width: 200px;
23                 background-color: blue;
24             }
25             
26             .two {
27                 background-color: red;
28                 flex: 1;
29             }
30             
31             .three {
32                 background-color: pink;
33                 flex: 2;
34             }
35         </style>
36     </head>
37 
38     <body>
39         <div id="oo">
40             <div class="one">1</div>
41             <div class="two">2</div>
42             <div class="three">3</div>
43         </div>
44     </body>
45 
46 </html>

相关阅读:
my first blog
iFrame 父子窗口通讯
关于手机端横屏竖屏问题
IE环境规定div高度必须大于字体高度的问题
adMob的旋转方法
影响一个UIView是否能正常显示的几个因素
iphone编译时的注意事项
Cocos2d的字体生成软件Hiero v2.0 Bitmap Font Tool的一些问题
编写Web前端代码的注意事项
Cocos2d的SpriteSheet在多层图片时出现的问题

原文地址：https://www.cnblogs.com/panda-ling/p/6323365.html