-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathnine-blocks.ts
More file actions
66 lines (62 loc) · 1.5 KB
/
nine-blocks.ts
File metadata and controls
66 lines (62 loc) · 1.5 KB
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
// <!DOCTYPE html>
// <html>
// <head>
// <meta charset="utf-8">
// <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
// <meta name="renderer" content="webkit">
// <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
// </head>
// <body>
// <!--
// // 设备宽度未知，九宫格容器是一个正方形，每个宫格也是正方形，宫格边框宽度为1px
// +----+----+----+
// | 0A | 0B | 0C |
// |----|----|----|
// | 1A | 1B | 1C |
// |----|----|----|
// | 2A | 2B | 2C |
// +----+----+----+
// -->
// </body>
// </html>
appendCss(`
#mountNode {
padding: 20px;
}
.grids {
margin: 0 auto;
max-width: 300px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.grids > div {
border: solid 1px gray;
display: flex;
align-items: center;
justify-content: center;
margin: -1px 0 0 -1px; /* dont forget */
}
.grids > div:before {
display: block;
content: '';
padding-bottom: 100%;
}
`)
let myGrids = document.createElement('div')
myGrids.id = 'myGrids'
myGrids.className = 'grids'
let cols = 3
let arr: string[] = []
for (let i = 0; i < cols; i++) {
for (let j = 0; j < cols; j++) {
arr.push(`${i}${String.fromCharCode(65+j)}`)
}
}
arr.forEach(val => {
let div = document.createElement('div')
div.textContent = val
div.style.width = `${100 / cols}%`
myGrids.appendChild(div)
})
document.querySelector('#mountNode').appendChild(myGrids)