Two-column layout (one column is fixed width, one column is adaptive, and the columns are equal height)

Structure:

<span style="color: #008080;">1</span>    <span style="color: #0000ff;"><</span><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><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><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><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><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><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>

1. Use table+table-cell to implement a two-column layout (one column has a fixed width, one column is adaptive, and the table is automatically the same height as the two columns)

<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. Use flex for two-column layout (one column has fixed width, one column is adaptive, and the columns have equal height). The default value of flex’s align-item attribute is 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. Use float (pseudo-height)

<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>     }