<div class="parent">
<div class="child" style="background: lightblue"></div>
<div class="child" style="background: lightgreen"></div>
<div class="child" style="background: red"></div>
<div class="child"></div>
</div>
1
2
3
4
5
6
2
3
4
5
6
# 方式1 浮动布局(float+box-sizing+border)
.parent{
overflow: hidden;//成为BFC
background: gray
}
.child{
float: left;//成为BFC
height: 100px;
width: 25%;
padding: 20px;
border: 5px solid;
box-sizing: border-box;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 方式2 浮动布局(float+calc)
.parent {
overflow: hidden;
background: gray
}
.child {
float: left;
height: 100px;
width: calc(25% - 10px);
border: 5px solid;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 方式3 行内块级元素等分布局（inline-block、box-sizing=border-box、font-size=0）
.parent {
font-size: 0;
overflow: hidden;
background: gray
}
.child {
display: inline-block;
height: 100px;
width: 25%;
box-sizing: border-box;
border: 5px solid;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 方式4 行内块级元素等分布局（inline-block、calc、font-size=0）
.parent {
font-size: 0;
overflow: hidden;
background: gray
}
.child {
display: inline-block;
height: 100px;
width: calc(25% - 10px);
border: 5px solid;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 方式5 flex布局
.parent {
overflow: hidden;
background: gray;
display: flex;
}
.child {
flex: 1;
height: 100px;
border: 5px solid;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 方式6 table布局
.parent {
overflow: hidden;
background: gray;
display: table;
}
.child {
display: table-cell;
height: 100px;
border: 5px solid;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 方式7 grid布局
.parent {
overflow: hidden;
background: gray;
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
.child {
height: 100px;
border: 5px solid;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11