本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.17节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
到目前为止，已经见过了page、header、footer和theme。有时候在页面中需要使用多个列。尤其是当与平板终端打交道时，可能屏幕上会多出很多有效的剩余空间区块。jQuery Mobile为你提供了默认的类来表示单独的列。代码清单9-20利用这些类在行（row）上放置多个按钮。
代码清单9-20 使用按钮来演示列
00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>Layout</title> 04 <meta name="viewport" 05 content="width=device-width, initial-scale=1"> 06 <link rel="stylesheet" href= 07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> 08 <script type="text/javascript" 09 src="http://code.jquery.com/jquery-1.7.1.min.js"> 10 </script> 11 <script type="text/javascript" src= 12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 13 </script> 14 15 </head> 16 <body> 17 18 <div data-role="page"> 19 20 <div data-role="header"> 21 <h1>Layouts</h1> 22 </div> 23 24 <div data-role="content"> 25 26 <div class="ui-grid-a"> 27 <div class="ui-block-a"> 28 <a href="#" data-role="button">Left</a> 29 </div> 30 <div class="ui-block-c"> 31 <a href="#" data-role="button">Right</a> 32 </div> 33 </div> 34 35 <div class="ui-grid-b"> 36 <div class="ui-block-a"> 37 <a href="#" data-role="button">Left</a> 38 </div> 39 <div class="ui-block-b"> 40 <a href="#" data-role="button">Middle</a> 41 </div> 42 <div class="ui-block-c"> 43 <a href="#" data-role="button">Right</a> 44 </div> 45 </div> 46 47 <div class="ui-grid-c"> 48 <div class="ui-block-a"> 49 <a href="#" data-role="button">Left</a> 50 </div> 51 <div class="ui-block-b"> 52 <a href="#" data-role="button">Leftish</a> 53 </div> 54 <div class="ui-block-c"> 55 <a href="#" data-role="button">Rightish</a> 56 </div> 57 <div class="ui-block-d"> 58 <a href="#" data-role="button">Right</a> 59 </div> 60 </div> 61 </div> 62 63 </body> 64 </html>首先请看第26、35和47行。这些div包含了类ui-grid-a、ui-grid-b和ui-grid-c。这些类将div转换成了多个列的容器，分别表示2、3和4列。
在这些div之中，你会发现有内嵌的div：它们拥有类ui-block-a、ui-block-b、ui-block-c及ui-block-d。它们就是所谓的“列”。不管在哪个容器中，列的名称都可以被使用。很明显，还是要避免在ui-grid-a中出现ui-block-c的情况为好，因为ui-grid-a会认为只有两列。
