最近有个需求是这样的
- 整个容器宽度自适应
- 网格要求正方形
- 一行只允许3个,不管宽度如何放大缩小
- 上下左右间距需要相等
- 两端对齐
首先是自适应宽度的正方形，由于margin, padding的百分比数值是相对父元素宽度的宽度计算的，所以可以利用这一点来实现正方形。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
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
width: 100%;
}
.parent{
width: 100%;
background: #000;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.child {
position: relative;
padding-bottom: 33.3333%;
width: 33.3333%;
height: 0;
background: #ff0000;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
</body>
</html>
但是有一个问题，如果child内部有子元素，高度会被撑开，但是现在是实现这个正方形了，那我们可以利用绝对定位，来让子元素内部的布局更加灵活可控。
1 |
|
上下左右间距相同。这个简单，我们做个算术，将设计稿上的间距px转成子元素宽度的百分比，n等分的公式为：
(width + marginRight)*n = 100%;
marginBottom = marginRight;
paddingBottom = width;
以上左和右，上和下的设置可根据自己的喜好替换。1
2
3
4
5
6
7
8
9
10.child_1 {
position: relative;
padding-bottom: 31.3333%;
margin-bottom: 2%;
margin-right: 2%;
width: 31.3333%;
height: 0;
background: #ff0000;
overflow: hidden;
}
可是，我们的下侧和下侧还留出了一段呀。那就重新计算一下嘛1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16.child_1 {
position: relative;
padding-bottom: 31.3333%;
margin-bottom: 3%;
margin-right: 3%;
width: 31.3333%;
height: 0;
background: #ff0000;
overflow: hidden;
}
.child_1:nth-child(3n) {
margin-right: 0;
}
.child_1:nth-child(n+3) {
margin-bottom: 0;
}
最后的代码是这样的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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,
body {
width: 100%;
}
.parent {
width: 100%;
background: #000;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.child_1 {
position: relative;
padding-bottom: 31.3333%;
margin-bottom: 3%;
margin-right: 3%;
width: 31.3333%;
height: 0;
background: #ff0000;
overflow: hidden;
}
.child_1:nth-child(3n) {
margin-right: 0;
}
.child_1:nth-child(n+3) {
margin-bottom: 0;
}
.child_2{
position: absolute;
width: 100%;
height: 100%;
}
.content {
width: 50px;
height: 100px;
margin-top: 50%;
margin-left: 50%;
transform: translateX(-50%) translateY(-50%);
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="child_1">
<div class="child_2">
<div class="content"></div>
</div>
</div>
<div class="child_1">
<div class="child_2"></div>
</div>
<div class="child_1">
<div class="child_2"></div>
</div>
<div class="child_1">
<div class="child_2"></div>
</div>
<div class="child_1">
<div class="child_2"></div>
</div>
<div class="child_1">
<div class="child_2"></div>
</div>
</div>
</body>
</html>
当然更好的方式是给父元素设置一个同样间距宽度的负边距，这样就不用这么复杂的选择器+计算了。
总结
没有什么奇技淫巧，垂直方向的padding、margin是相对于元素宽度的，就这一点看起来怪怪的，又很实用的设置。