grid-10-24.html
3.19 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
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
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en" >
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet/less" type="text/css" href="../less/type.less" />
<link rel="stylesheet/less" type="text/css" href="../less/grid.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
<style>
.xn-grid-layout [class*="xn-grid-"]{
height: 30px;
background: #ddd;
}
.xn-grid-layout{margin-bottom: 10px;
background: #eee;
}
</style>
</head>
<body >
<div class="xn-width auto">
<div class="xn-grid-layout">
<div class="xn-grid-24">xn-grid-24</div>
</div>
<h3>两栏</h3>
<div class="xn-grid-layout">
<div class="xn-grid-1">xn-grid-1</div>
<div class="xn-grid-23">xn-grid-23</div>
</div>
<div class="xn-grid-layout">
<div class="xn-grid-2">xn-grid-2</div>
<div class="xn-grid-22">xn-grid-22</div>
</div>
<div class="xn-grid-layout">
<div class="xn-grid-3">xn-grid-3</div>
<div class="xn-grid-21">xn-grid-21</div>
</div>
<div class="xn-grid-layout">
<div class="xn-grid-4">xn-grid-4</div>
<div class="xn-grid-20">xn-grid-20</div>
</div>
<div class="xn-grid-layout">
<div class="xn-grid-5">xn-grid-5</div>
<div class="xn-grid-19">xn-grid-19</div>
</div>
<div class="xn-grid-layout">
<div class="xn-grid-6">xn-grid-6</div>
<div class="xn-grid-18">xn-grid-18</div>
</div>
<div class="xn-grid-layout">
<div class="xn-grid-7">xn-grid-7</div>
<div class="xn-grid-17">xn-grid-17</div>
</div>
<div class="xn-grid-layout">
<div class="xn-grid-8">xn-grid-8</div>
<div class="xn-grid-16">xn-grid-16</div>
</div>
<div class="xn-grid-layout">
<div class="xn-grid-9">xn-grid-9</div>
<div class="xn-grid-15">xn-grid-15</div>
</div>
<div class="xn-grid-layout">
<div class="xn-grid-10">xn-grid-10</div>
<div class="xn-grid-14">xn-grid-14</div>
</div>
<div class="xn-grid-layout">
<div class="xn-grid-11">xn-grid-11</div>
<div class="xn-grid-13">xn-grid-13</div>
</div>
<div class="xn-grid-layout">
<div class="xn-grid-12">xn-grid-12</div>
<div class="xn-grid-12">xn-grid-12</div>
</div>
<h3>三栏</h3>
<div class="xn-grid-layout">
<div class="xn-grid-5">xn-grid-5</div>
<div class="xn-grid-19">xn-grid-19</div>
</div>
<div class="xn-grid-layout">
<div class="xn-grid-19">xn-grid-19</div>
<div class="xn-grid-5">xn-grid-5</div>
</div>
<div class="xn-grid-layout">
<div class="xn-grid-5">xn-grid-5</div>
<div class="xn-grid-14">xn-grid-14</div>
<div class="xn-grid-5">xn-grid-5</div>
</div>
<h3>左边距</h3>
<div class="xn-grid-layout">
<div class="xn-grid-12 xn-grid-offset-12">xn-grid-offset-12</div>
</div>
<div class="xn-grid-layout">
<div class="xn-grid-11 xn-grid-offset-13">xn-grid-offset-13</div>
</div>
<div class="xn-grid-layout">
<div class="xn-grid-10 xn-grid-offset-14">xn-grid-offset-13</div>
</div>
</div>
</body>
</html>