案例：jquery Mobile案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<link rel="stylesheet" href="/js/jquery.mobile-1.3.2.min.css">
5
<script src="/js/jquery-1.8.3.min.js"></script>
6
<script src="/js/jquery.mobile-1.3.2.min.js"></script>
7
<style>
8
.ui-block-a,
9
.ui-block-b,
10
.ui-block-c
11
{
12
background-color: lightgray;
13
border: 1px solid black;
14
height: 100px;
15
font-weight: bold;
16
text-align: center;
17
padding: 30px;
18
}
19
</style>
20
</head>
21
<body>
22
​
23
<div data-role="page" id="pageone">
24
  <div data-role="header">
25
  <h1>自定义的列</h1>
26
  </div>
27
​
28
  <div data-role="content">
29
   <p>三列样式布局：</p>
30
   <div class="ui-grid-b">
31
     <div class="ui-block-a"><span>第一个列</span></div>
32
     <div class="ui-block-b"><span>第二个列</span></div>
33
     <div class="ui-block-c"><span>第三个列</span></div>
34
   </div>
35
  </div>
36
</div>
37
​
38
</body>
39
</html>
40
​