一侧宽度固定，一侧自适应的布局

方法一：用flex布局

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="{CHARSET}">
 6         <title></title>
 7     </head>
 8     <style>
 9         .parent {
10             height: 500px;
11             border: 1px solid #222;
13             display: flex;
14         }
15         
16         .left {
17             width: 200px;
18             border: 1px solid #ccc;
19             margin: 20px;
20         }
21         
22         .right {
23             border: 1px solid #ff4400;
24             margin: 20px;
25             flex: 1;
26         }
27     </style>
28 
29     <body>
30         <div class="parent">
31             <div class="left">stable 固定宽度200px</div>
32             <div class="right">changeable 可变宽度</div>
33         </div>
34     </body>
35 
36 </html>

方法二：用浮动布局

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="{CHARSET}">
 6         <title></title>
 7     </head>
 8     <style>
 9         .parent {
10             height: 500px;
11             border: 1px solid #222;
12         }
13         
14         .left {
15             float: left;
16             width: 200px;
17             border: 1px solid #ccc;
18             margin: 20px;
19             height: 200px;
20         }
21         
22         .right {
23             border: 1px solid #ff4400;
24             margin: 20px;
25             height: 200px;
26         }
27     </style>
28 
29     <body>
30         <div class="parent">
31             <div class="left">stable 固定宽度200px</div>
32             <div class="right">changeable 可变宽度</div>
33         </div>
34     </body>
35 
36 </html>

方法三:通过绝对定位

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="{CHARSET}">
 6         <title></title>
 7     </head>
 8     <style>
 9        .parent {
10             height: 500px;
11             border: 1px solid #222;
12         }
13         
14         .left {
15             position: absolute;
16             width: 200px;
17             border: 1px solid #ccc;
18             /*margin: 20px;*/
19             height: 200px;
20         }
21         
22         .right {
23             border: 1px solid #ff4400;
24             margin-left:200px;
25             height: 200px;
26         }
27     </style>
28 
29     <body>
30         <div class="parent">
31             <div class="left">stable 固定宽度200px</div>
32             <div class="right">changeable 可变宽度</div>
33         </div>
34     </body>
35 
36 </html>

相关阅读:
一种循环方式
 SqlServer循环读取配置
 app抓包
 c# 前端写代码的情况
 第36月第27日 codesign重签名
 第36月第26天吴恩达目标检测
 第36月第25天 TensorFlow Object_detection
第36月第19天多个tomcat查端口
 第36月第8天 flask_bootstrap
第36月第5天升级到 XCode10.3 项目中的xib报错
原文地址：https://www.cnblogs.com/lvlvlv/p/11065368.html