兩欄佈局三種方式實現
阿新 • • 發佈:2021-10-03
1. 實際上類似 三欄佈局,仍然是三種實現方式:浮動、定位、flex
【1】float + margin-left / BFC(overflow: hidden;)
<div class="box"> <div class="left"></div> <div class="right"></div> </div>
.box { width: 100%; } .left { width: 100px; height: 100px; float: left; background-color: skyblue; } .right { /*margin-left: 100px;*/ background-color: pink; overflow: hidden; height: 100px; }
2. position + margin-left
.box { position: relative; } .left { position: absolute; height: 100px; width: 100px; background-color: skyblue; } .right { margin-left: 100px; height: 100px; background-color: rosybrown; }
3. flex
.box { width: 100%; display: flex; } .left { width: 100px; height: 100px; background-color: skyblue; } .right { flex: 1; height: 100px; background-color: palegreen; }