前端泥瓦匠

Appearance

Return to top
On this page

等分布局

含义：等分布局就是指一行被分为若干列，每一列的宽度是相同的值

图片实现
- 利用 float 实现
- 利用 table 实现
- 使用 flex 实现

正常等分

方法一 float

html
<div id="parent" class="clearfix">
  <div id="col1"></div>
  <div id="col2"></div>
  <div id="col3"></div>
  <div id="col4"></div>
</div>
1
2
3
4
5
6
css
* {
  margin: 0;
  padding: 0;
}

#col1,
#col2,
#col3,
#col4 {
  height: 300px;
  float: left;
  width: 25%;
}

#col1 {
  background-color: hotpink;
}

#col2 {
  background-color: lightblue;
}

#col3 {
  background-color: blue;
}
#col4 {
  background-color: red;
}

#parent {
  padding: 20px;
  border: 10px solid;
  /*
  子元素浮动 - 导致父元素的高度塌陷
  解决:
  1. 固定高度 height 固定写死
  2. overflow:hidden => BFC 特点: 把浮动的高度计算进去
  3. clear:both => 加载浮动子元素的尾部 <div style="clear:both"></div>
  4. 利用伪元素 ::after
  */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

方法二 利用 table 实现

css
* {
  margin: 0;
  padding: 0;
}

#parent {
  width: 100%;
  display: table;
}

#col1,
#col2,
#col3,
#col4 {
  display: table-cell;
  height: 300px;
}

#col1 {
  background-color: hotpink;
}

#col2 {
  background-color: lightblue;
}

#col3 {
  background-color: blue;
}
#col4 {
  background-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

方法二 利用 flex

css
* {
  margin: 0;
  padding: 0;
}

#parent {
  width: 100%;
  display: flex;
}

#col1,
#col2,
#col3,
#col4 {
  flex:1;
  height: 300px;
}

#col1 {
  background-color: hotpink;
}

#col2 {
  background-color: lightblue;
}

#col3 {
  background-color: blue;
}
#col4 {
  background-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

间距处理

方法一 浮动布局 - 加在 border 上

html
<div class="parent-fix">
  <div id="parent" class="clearfix">
    <div id="col1"></div>
    <div id="col2"></div>
    <div id="col3"></div>
    <div id="col4"></div>
  </div>
</div>
1
2
3
4
5
6
7
8
css
* {
  margin: 0;
  padding: 0;
}
.parent-fix {
  overflow: hidden;
}

#parent {
  height: 300px;
  /* 整体移动 视觉上没有10px */
  margin-left: -10px;
}

#col1,
#col2,
#col3,
#col4 {
  height: 300px;
  width: 25%;
  float: left;
  /* 怪异盒模型 */
  box-sizing: border-box;
  border-left: 10px solid #fff;
  /* 盒子模型
  box-sizing:
  content-box: width = width - padding-left/right - border-left/right
  border-box: width = width(padding+border);

  margin 不影响盒子模型的大小 => 间距 / 位移
  */
}

#col1 {
  background-color: hotpink;
}

#col2 {
  background-color: lightblue;
}

#col3 {
  background-color: blue;
}
#col4 {
  background-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

方法二 浮动布局 - 加在 padding 上

css
<div id="parent" class="clearfix">
  <div id="col1">
  	<div class="innter"></div>
  </div>
  <div id="col2">
  	<div class="innter"></div>
  </div>
  <div id="col3">
  	<div class="innter"></div>
  </div>
  <div id="col4">
  	<div class="innter"></div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
css
* {
  margin: 0;
  padding: 0;
}

#parent {
  height: 300px;
  margin-left: -10px;
}

#col1,
#col2,
#col3,
#col4 {
  width: 25%;
  float: left;
  padding-left: 10px;
  box-sizing: border-box;
}


#col1 .innter {
  height: 300px;
  background-color: hotpink;
}

#col2 .innter {
  height: 300px;
  background-color: lightblue;
}

#col3 .innter {
  height: 300px;
  background-color: blue;
}
#col4 .innter {
  height: 300px;
  background-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

方法三 table

css
* {
  margin: 0;
  padding: 0;
}

#parent-wrap {
  /* 整体移动放在父元素上 */
  margin-left: -10px;
}

#parent {
  width: 100%;
  display: table;
}

#col1,
#col2,
#col3,
#col4 {
  height: 300px;
  display: table-cell;
  padding-left: 10px;
}

/* 问题: 第一个模块直接消失 */
/* #col1 {
padding-left: 0px;
} */

#col1 .inner {
  height: 300px;
  background-color: hotpink;
}

#col2 .inner {
  height: 300px;
  background-color: lightblue;
}

#col3 .inner {
  height: 300px;
  background-color: blue;
}
#col4 .inner {
  height: 300px;
  background-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
css
<div id="parent-wrap">
  <div id="parent">
    <div id="col1">
    	<div class="inner"></div>
    </div>
    <div id="col2">
    	<div class="inner"></div>
    </div>
    <div id="col3">
    	<div class="inner"></div>
    </div>
    <div id="col4">
    	<div class="inner"></div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

方法四 flex

css
* {
  margin: 0;
  padding: 0;
}

#parent-wrap {
  margin-left: -10px;
}

#parent {
  width: 100%;
  display: flex;
}

#col1,
#col2,
#col3,
#col4 {
  height: 300px;
  flex: 1;
  padding-left: 10px;
}

#col1 .inner {
  height: 300px;
  background-color: hotpink;
}

#col2 .inner {
  height: 300px;
  background-color: lightblue;
}

#col3 .inner {
  height: 300px;
  background-color: blue;
}
#col4 .inner {
  height: 300px;
  background-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
html
<div id="parent-wrap">
  <div id="parent">
    <div id="col1">
      <div class="inner"></div>
    </div>
    <div id="col2">
      <div class="inner"></div>
    </div>
    <div id="col3">
      <div class="inner"></div>
    </div>
    <div id="col4">
      <div class="inner"></div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Copyright © 2018-2025 Mason

沪ICP备20006251号-1