-
Notifications
You must be signed in to change notification settings - Fork 0
/
flex_layout_case2.html
96 lines (90 loc) · 3.6 KB
/
flex_layout_case2.html
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Flex布局</title>
<link rel="stylesheet" type="text/css" href="flex_layout_case2.css">
</head>
<body>
<div class="title">基本网格布局</div>
<div class="grid">
<div class="cell cell1"></div>
<div class="cell cell1"></div>
</div>
<div class="grid">
<div class="cell cell1"></div>
<div class="cell cell1"></div>
<div class="cell cell1"></div>
</div>
<div class="grid">
<div class="cell cell1"></div>
<div class="cell cell1"></div>
<div class="cell cell1"></div>
<div class="cell cell1"></div>
</div>
<div class="grid">
<div class="cell cell2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam atque facere dicta consectetur repellendus officia </div>
<div class="cell cell2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae quisquam tempora magnam ex quis porro, unde tempore quidem, et cum vero a eos architecto ipsam adipisci maxime aspernatur corporis ipsa.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae quisquam tempora magnam ex quis porro, unde tempore quidem, et cum vero a eos architecto ipsam adipisci maxime aspernatur corporis ipsa.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae quisquam tempora magnam ex quis porro, unde tempore quidem, et cum vero a eos architecto ipsam adipisci maxime aspernatur corporis ipsa.</div>
</div>
<div class="title">百分比布局</div>
<div class="grid grid1">
<div class="cell cell_1of2">1/2</div>
<div class="cell">auto</div>
<div class="cell">auto</div>
</div>
<div class="grid grid1">
<div class="cell">auto</div>
<div class="cell cell_1of3">1/3</div>
</div>
<div class="grid grid1">
<div class="cell cell_1of4">1/4</div>
<div class="cell">auto</div>
<div class="cell cell_1of3">1/3</div>
</div>
<div class="title">输入框的布局</div>
<div class="input_item">
<span>E-mail:</span>
<input type="text" class="field" />
<button>send</button>
</div>
<div class="title">悬挂式布局</div>
<div class="media">
<img src="cat.jpg" class="media_figure">
<div class="media_body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit et accusamus porro minus quasi aliquam autem ipsum quod eum doloremque nihil aliquid, facilis velit, sint quidem pariatur harum, amet quia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit et accusamus porro minus quasi aliquam autem ipsum quod eum doloremque nihil aliquid, facilis velit, sint quidem pariatur harum, amet quia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit et accusamus porro minus quasi aliquam autem ipsum quod eum doloremque nihil aliquid, facilis velit, sint quidem pariatur harum, amet quia.</div>
</div>
<div class="title">流式布局</div>
<div class="float_layout">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="float_layout">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="float_layout">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>