两列布局（一列定宽，一列自适应，列等高）

1    <div class="parent"> 
2         <div class="left"> 
3             <p>left</p> 
4         </div> 
5         <div class="right"> 
6             <p>right</p> 
7             <p>right</p> 
8         </div> 
9     </div>

 1 .parent { 
 2         background-color: grey; 
 3         width: 500px; 
 4         height: 300px; 
 5         padding: 10px; 
 6         box-sizing: border-box; 
 7  
 8         display: table; 
 9         table-layout: fixed; 
10         table-layout: fixed;/*加速table的渲染，实现布局优先*/ 
11     } 
12     .left { 
13         display: table-cell; 
14         width: 100px; 
15  
16         background-color: skyblue; 
17         border-right: 10px solid transparent; 
18         background-clip: padding-box;/*设置背景的显示位置*/ 
19     } 
20     .right { 
21         display: table-cell; 
22         background-color: greenyellow; 
23     }

 1 .parent { 
 2         background-color: grey; 
 3         width: 500px; 
 4         height: 300px; 
 5         padding: 10px; 
 6  
 7         display: flex; 
 8     } 
 9     .left { 
10         width: 100px; 
11         margin-right: 10px; 
12         background-color: skyblue; 
13     } 
14     .right { 
15         flex: 1; /* 填充剩余部分 */ 
16         background-color: greenyellow; 
17     }

 1 .parent { 
 2         background-color: grey; 
 3         width: 500px; 
 4         height: 300px; 
 5         padding: 10px; 
 6  
 7         overflow: hidden;/*截断*/ 
 8     } 
 9     .left,.right { 
10         padding-bottom: 99999px; 
11         margin-bottom: -99999px; 
12     }/*登高*/ 
13     .left { 
14         width: 100px; 
15         background-color: skyblue; 
16         margin-right: 10px; 
17         float: left; 
18          
19     } 
20     .right { 
21         overflow: hidden; 
22         background-color: yellowgreen; 
23     }