CSS 常用经典布局 - 两栏布局

效果展示

原始效果

最终效果

原始代码

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
10
11
12
13
14
15
body {
min-width: 630px;
margin: 0;
}

.left {
width: 100px;
height: 100px;
background-color: #ffb5bf;
}

.right {
height: 100px;
background-color: #94e8ff;
}

实现方法

使用float

第一种方法:

1
2
3
4
5
6
7
8
9
10
11
.container {
overflow: hidden;
}

.left {
float: left;
}

.right {
margin-left: 100px;
}

第二种方法:

1
2
3
4
5
6
7
8
9
10
11
.container {
overflow: hidden;
}

.left {
float: left;
}

.right {
overflow: auto;
}

第三种方法:

1
2
3
4
5
6
7
8
9
10
11
12
.container {
overflow: hidden;
}

.left {
float: left;
}

.right {
float: left;
width: calc(100% - 100px);
}

使用inline-block

1
2
3
4
5
6
7
8
9
10
11
12
.container {
font-size: 0;
}

.left,
.right {
display: inline-block;
}

.right {
width: calc(100% - 100px);
}

使用absolute

1
2
3
4
5
6
7
8
9
10
11
.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
.container {
display: table;
width: 100%;
}

.left,
.right {
display: table-cell;
}

CSS 常用经典布局 - 两栏布局
https://blog.xukaiyyds.cn/posts/edc505a4/
作者
xukaiyyds
发布于
2023年2月11日
许可协议