jQuery Mobile 网格布局-优快云博客

本文链接：https://blog.youkuaiyun.com/hqmln/article/details/84696990

本文介绍了一种使用不同类名实现的UI网格布局方法，通过外部div应用class=ui-grid-a，内部div分别使用class=ui-block-a等来创建响应式网格布局。示例中展示了从两列到五列布局的变化，并且每个单元格内部还包含特定样式的区块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

外部div使用class="ui-grid-a"，而内部使用 class="ui-block-a"

  <div data-role="page">
<div data-role="header">
    <h1>头部栏标题</h1></div>
    <div class="ui-grid-a"> 
	  <div class="ui-block-a">
		<div class="ui-bar ui-bar-b h60">A</div>
	  </div> 
	  <div class="ui-block-b">
		<div class="ui-bar ui-bar-b h60">B</div>
	  </div>
	</div> 
	<div class="ui-grid-b"> 
	  <div class="ui-block-a">
		<div class="ui-bar ui-bar-c h60">A</div>
	  </div> 
	  <div class="ui-block-b">
		<div class="ui-bar ui-bar-c h60">B</div>
	  </div>
	  <div class="ui-block-c">
		<div class="ui-bar ui-bar-c h60">C</div>
	  </div>
	</div> 
	<div class="ui-grid-c"> 
	  <div class="ui-block-a">
		<div class="ui-bar ui-bar-d h60">A</div>
	  </div> 
	  <div class="ui-block-b">
		<div class="ui-bar ui-bar-d h60">B</div>
	  </div>
	  <div class="ui-block-c">
		<div class="ui-bar ui-bar-d h60">C</div>
	  </div>
	  <div class="ui-block-d">
		<div class="ui-bar ui-bar-d h60">D</div>
	  </div>
	</div> 
	<div class="ui-grid-d"> 
	  <div class="ui-block-a">
		<div class="ui-bar ui-bar-e h60">A</div>
	  </div> 
	  <div class="ui-block-b">
		<div class="ui-bar ui-bar-e h60">B</div>
	  </div>
	  <div class="ui-block-c">
		<div class="ui-bar ui-bar-e h60">C</div>
	  </div>
	  <div class="ui-block-d">
		<div class="ui-bar ui-bar-e h60">D</div>
	  </div>
	  <div class="ui-block-e">
		<div class="ui-bar ui-bar-e h60">E</div>
	  </div>
	</div> 
　　<div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>