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>