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

结构：

<span style="color: #008080;">1</span>    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="parent"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>             <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>left<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>         <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span>             <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>right<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">7</span>             <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>right<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">8</span>         <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">9</span>     <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

1.用table+table-cell实现两列布局（一列定宽，一列自适应，且table是自动的两列自动等高）

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

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

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

3.使用float（伪等高）

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