jQuery Mobile 网格

布局网格：是一种基于CSS的列布局方案。 由于移动设备的屏幕宽度所限，一般不推荐在移动设备上使用列布局

                    在定位更小的元素时，可以使用到。

                    网格中列是等宽的，无边框、背景、外边距、内边距

                   2列：ui-grid-a（子元素：ui-block-a|b）

              3列：ui-grid-b（子元素：ui-block-a|b|c）

              4列：ui-grid-c（子元素：ui-block-a|b|c|d）

              5列：ui-grid-d（子元素：ui-block-a|b|c|d|e）

              e.g.

              <div data-role="content">

                     <p>2列布局</p>

                     <div  class="ui-grid-a">

                            <div  class="ui-block-a">

                                     <a  href="#"  data-role="button">第一列button</a><br/>

                                     <span>....</span>

                            </div>

                            <div  class="ui-block-b">

                                      <a  href="#"  data-role="button">第二列button</a><br/>

                                      <span>....</span>

                            </div>

                     </div>

              </div>

               定制网格样式：

                     1.使用CSS

                     e.g.

                     <style>

                     .ui-block-a,

                     .ui-block-b,

                     .ui-block-c

                     { background-color:yellow;  border:1px solid black;  height:100px;  font-weight:bold;  text-align:center;  padding:30px; }

                     </style>

                    2. 行内样式：

                    <div  class="ui-block-a"  style="..."><span>content.....<span></div>

               网格中多行定制： class="ui-block-a"  将始终创建新行

               e.g.

               <div  class="ui-grid-b">

                     <div  class="ui-block-a">....</div>

                     <div  class="ui-block-b">....</div>

                     <div  class="ui-block-c">....</div>

                    <div  class="ui-block-a">....</div>  //第二行第一列

                    <div  class="ui-block-b">....</div>   //第二行第二列

                    <div  class="ui-block-a">....</div>   //第三行第一列

               </div>