原始代码
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;
}
|