Struktur:
<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. Verwenden Sie table table-cell, um ein zweispaltiges Layout zu implementieren (eine Spalte hat eine feste Breite, eine Spalte ist adaptiv und die Tabelle hat automatisch die gleiche Höhe wie die beiden Spalten)
<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. Verwenden Sie Flex für ein zweispaltiges Layout (eine Spalte hat eine feste Breite, eine Spalte ist adaptiv und die Spalten haben die gleiche Höhe).
<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> }
<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> }
