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日

同じカテゴリー(グリッドレイアウト)のエントリー

検索

スポンサードリンク

バージョン

リファレンス