原始代码
html 部分
1 2 3 4
| <div class="container"> <div class="left">left</div> <div class="right">right</div> </div>
|
css 部分
1 2 3 4 5 6 7 8 9
| .left { width: 100px; height: 100px; background-color: #FFB5BF; } .right { height: 100px; background-color: #94E8FF; }
|
效果展示
原始效果

最终效果

实现方法
使用 float
第一种方法
1 2 3 4 5 6 7 8 9
| .container { overflow: hidden; } .left { float: left; } .right { margin-left: 100px; }
|
第二种方法
1 2 3 4 5 6 7 8 9 10
| .container { overflow: hidden; } .left { float: left; } .right { float: left; width: calc(100% - 100px); }
|
第三种方法
1 2 3 4 5 6 7 8 9
| .container { overflow: hidden; } .left { float: left; } .right { overflow: auto; }
|
使用 inline-block
1 2 3 4 5 6 7 8 9
| .container { font-size: 0; } .left, .right { display: inline-block; } .right { width: calc(100% - 100px); }
|
使用 absolute
1 2 3 4 5 6 7 8 9
| .container { position: relative; } .left { position: absolute; } .right { margin-left: 100px; }
|
使用 flex
1 2 3 4 5 6 7
| .container { display: flex; }
.right { flex: 1; }
|
使用 grid
1 2 3 4
| .container { display: grid; grid-template-columns: 100px auto; }
|
使用 table
1 2 3 4 5 6 7 8 9 10
| .container { display: table; width: 100%; } .left { display: table-cell; } .right { display: table-cell; }
|