3カラム
jQery Mobileではclass属性「ui-grid-b」を利用して3カラムレイアウトが可能です。
class属性「ui-grid-b」を付けたdiv要素の中に、1カラム目の内容をclass属性「ui-block-a」を付けたdiv要素の中に、2カラム目の内容をclass属性「ui-block-b」を付けたdiv要素の中に、3カラム目の内容をclass属性「ui-block-c」を付けたdiv要素の中に記述します。
<div class="ui-grid-b">
<div class="ui-block-a">1カラムの内容</div>
<div class="ui-block-b">2カラムの内容</div>
<div class="ui-block-c">3カラムの内容</div>
</div>行数はclass属性「ui-block-a」とclass属性「ui-block-b」、class属性「ui-block-c」を付けた要素を追加していくことで増やせます。
<div class="ui-grid-b">
<div class="ui-block-a">1行目1カラムの内容</div>
<div class="ui-block-b">1行目2カラムの内容</div>
<div class="ui-block-c">1行目3カラムの内容</div>
<div class="ui-block-a">2行目1カラムの内容</div>
<div class="ui-block-b">2行目2カラムの内容</div>
<div class="ui-block-c">2行目3カラムの内容</div>
</div>参考URL
jQuery Mobile Docs - Content Grids
登録日 : 2012年10月13日 最終更新日 : 2016年12月19日