結(jié)構(gòu)：
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實現(xiàn)兩列布局（一列定寬，一列自適應(yīng)，且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的渲染，實現(xiàn)布局優(yōu)先*/ 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;/*設(shè)置背景的顯示位置*/ 19 } 20 .right { 21 display: table-cell; 22 background-color: greenyellow; 23 }
2. 使用flex進(jìn)行兩列布局（一列定寬，一列自適應(yīng)，列等高），flex的align-item屬性默認(rèn)值是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 }
【 微信掃一掃 】
