兩欄布局(左側(cè)固定寬度捆蜀，右側(cè)自適應(yīng))钠四，在工作中總結(jié)了幾種方法
<!-- HTML結(jié)構(gòu) -->
<div class="wrap">
<div class="left">
左側(cè)固定內(nèi)容
</div>
<div class="right">
右側(cè)內(nèi)容自適應(yīng)
</div>
</div>
-
使用浮動(dòng)—float
/* 清除瀏覽器默認(rèn)邊距 */ * { margin: 0; padding: 0; } .wrap { overflow: hidden; border: 1px solid red; } /* 脫離文檔流 */ .left { float: left; width: 200px; height: 200px; background: purple; } .right { margin-left: 200px; background: skyblue; height: 200px; } -
使用絕對(duì)定位實(shí)現(xiàn)—absolute
/* 清除瀏覽器默認(rèn)邊距 */ * { margin: 0; padding: 0; } .wrap { overflow: hidden; position: relative; } /* 脫離文檔流 */ .left { position: absolute; left: 0; top: 0; width: 200px; height: 200px; background: purple; } .right { margin-left: 200px; background: skyblue; height: 200px; } -
使用表格布局—table
/* 清除瀏覽器默認(rèn)邊距 */ * { margin: 0; padding: 0; } /* 表格布局 */ .wrap { display: table; width: 100%; } .left { display: table-cell; width: 200px; height: 200px; background: purple; } .right { display: table-cell; background: skyblue; height: 200px; } -
使用calc()函數(shù)
/* 清除瀏覽器默認(rèn)邊距 */ * { margin: 0; padding: 0; } /* 雙float */ .wrap { overflow: hidden; } .left { float: left; width: 200px; height: 200px; background: purple; } .right { float: left; background: skyblue; height: 200px; width: calc(100% - 200px); } -
使用inline-block和calc()函數(shù)
/* 清除瀏覽器默認(rèn)邊距 */ * { margin: 0; padding: 0; } /* 雙float */ .wrap { overflow: hidden; width: 100%; font-size: 0; } .left { display: inline-block; width: 200px; height: 200px; background: purple; font-size: 20px; } .right { display: inline-block; background: skyblue; height: 200px; width: calc(100% - 200px); font-size: 20px; } -
使用彈性布局—flex
/* 清除瀏覽器默認(rèn)邊距 */ * { margin: 0; padding: 0; } .wrap { display: flex; } .left { height: 200px; background: purple; flex:0 0 200px } .right { background: skyblue; height: 200px; flex: 1; }
