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

结构：

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.用table+table-cell实现两列布局（一列定宽，一列自适应，且table是自动的两列自动等高）

 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     }

登录后复制

2. 使用flex进行两列布局（一列定宽，一列自适应，列等高），flex的align-item属性默认值是stretch.

 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     }

登录后复制

3.使用float（伪等高）

 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     }

登录后复制